vue-cli項目中使用element-ui

（1）建立vue-cli項目

vue init webpack my-program        

通常情況下，一直回車即可，但是建議在自己寫一些 demo 的時候，不要執行 ESLint 的檢查，ESLint 檢查比較嚴格，甚至是過於細致，為了避免浪費時間糾結於一個空格，ESLint 就選擇 no 了

（2）進入該項目文件

cd my-program

（3）安裝依賴 node_modules

npm install
// or
cnpm install

（4）運行

依照 package.json 的 scripts 代碼段，執行運行命令

npm run dev
// or
npm start 

（5）安裝element-ui

如果不安裝 element-ui，卻在界面上直接使用組件，會出現如下報錯，界面上也無法渲染出 element 組件

// 使用 npm 方式安裝 element 可以更好地和 webpack 打包工具配合使用
npm install element-ui -S 
// or
cnpm  i element-ui --save

安裝成功狀態如下

（6）引入 Element

樣式文件需要單獨引入，直接使用完整引入吧，在 main.js 里寫入引用內容

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';    // （1）
import 'element-ui/lib/theme-chalk/index.css';    // （2）

Vue.config.productionTip = false
Vue.use(ElementUI, { size: 'small', zIndex: 3000 })  
// （3）在引入 Element 時，可以傳入一個全局配置對象。該對象目前支持 size 與 zIndex 字段。size 用於改變組件的默認尺寸，zIndex 設置彈框的初始 z-index（默認值：2000）

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: h => h(App)  // （4）
})

以上便完成了 element-ui 在 vue-cli 項目中的引入！

（7）補充內容

為了體現模塊化，可以建立一個文件來引入 element-ui 的樣式文件

比如 plugins -> element.js ，寫如下代碼

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

在 main.js 中

import Vue from 'vue'
import App from './App'
import router from './router'
import './plugins/element.js'  // （1）

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: h => h(App)     // （2）