使用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) });