vue-cli按需引入Element UI组件

一、环境

　　使用vue-cli搭建的环境

二、安装 babel-plugin-component

　　npm install babel-plugin-component -D

三、修改.babelrc文件，可以直接拷贝一下的配置，红色部分是在原来基础上添加的。

 1 {
 2   "presets": [
 3     ["env", {
 4       "modules": false,
 5       "targets": {
 6         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7       }
 8     }],
 9     "stage-2"
10   ],
11   "plugins": [
12     "transform-vue-jsx",
13     "transform-runtime",
14     [
15       "component",
16       {
17         "libraryName": "element-ui",
18         "styleLibraryName": "theme-chalk"
19       }
20     ]
21   ],
22   "env": {
23     "test": {
24       "presets": ["env", "stage-2"],
25       "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
26     }
27   }
28 }

四、在main.js文件添加所需的组件即可，例如添加Button组件；详情请看Element UI 官网

import { Button} from 'element-ui'

Vue.use(Button)