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組件文檔