使用ElementUI建立項目

 從 0 開始搭建 element 項目

 第一步，安裝 Nodejs/NPM

https://nodejs.org/zh-cn/download/

下載安裝便可！

第二步，安裝 vue-cli

打開 cmd 建立，在命令行下執行命令便可安裝: npm install -g @vue/cli
 安裝完後，會有一個 vue 命令能夠被調用: vue --version
 若是沒有，請從第零步從新開始 

第二步，建立新的項目 打開 cmd 窗口，切換到相關工做目錄: d: cd wodegongzuomulu 而後，在命令行下，使用 vue 命令建立項目： vue create vue-xiangmu 這時候項目就建立好了，建立好

 

的項目目錄以下:

 第三步，增長 ElementUI 的支持

在剛纔的命令行下，敲入命令: vue add element 若是有提醒，分別選擇: Full Import? Enter SCSS support? N ZH-CN 等待完成便可。

 

 第四步，增長 router 支持

在上述的命令行下，敲入命令:

vue add router
若是有提醒，選擇「回車」，「回車」….

等待完成便可！

 

 第五步，開始編碼。

 另外的另外

vue add router 命令等同於: 首先執行 npm install vue-router --save 在 main.js 裏添加: // 引進
import Router from 'vue-router'
import Home from './components/Home'
import About from './components/About'

// 註冊
Vue.use(Router) // 定義
const router = new Router({ base: process.env.BASE_URL, routes: [ { path: '/', component: Home }, { path: '/about, component: About }
 ] })

 

vue add element 命令等同於:

首先，執行 npm install element-ui --save 在 main.js 裏配置: import Vue from 'vue'; import App from './App.vue'; // 引入 js + css
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 註冊
Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });