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）