vue.js 2.0系列之 引入Elemrent UI

在Vue.js2.0+中，插件的使用步骤大体分为三步：

1. 引入要使用的插件
2. 注册一下要是用的插件
3. 正常使用

ElementUI的用法同样如此

一，完全使用

1，引入ElementUI

npm i element-ui --save

2，use

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

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

接下来就可以根据API文档使用了

二，按需引用

由于ElementUI的组件非常丰富，可能有许多组件项目中并不需要，如果完全引入的话，会影响最后的项目的打包体积。
1，首先安装按需引入的工具
安装 babel-plugin-component

npm install babel-plugin-component -D

2.修改.babelrc文件

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]]
}

3.使用示例

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
})

参考：ElementUI组件文档