vue-cli脚手架项目按需引入element-ui

一、安装 babel-plugin-component

     npm install babel-plugin-component –D

二、修改.babelrc

注意：
如果直接复制粘贴官网提供的配置文件肯定会报错,因为你把脚手架默认的配置给覆盖掉了,
正确的做法是做合并，合并，合并，babelrc应该修改为:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    ["es2015", { "modules": false }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx", "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

三、按需引入组件

这里我用了分割的写法，便于代码管理。不分割代码就是需要在main.js中import和Vue.use(组件名字)，
详细用法见官网element-ui

1. 在 src 文件夹中新建我们的 element 文件夹，并在里面新建一个 index.js 文件

2. 在index.js文件中去书写我们需要引入的部分组件

import {Row,Col,Container,Button,Menu,Submenu,MenuItem,Header,Breadcrumb,Main} from 'element-ui'
const element = {
    install:function(Vue){
        Vue.use(Row)
        Vue.use(Col)
        Vue.use(Container)
        Vue.use(Button)
        Vue.use(Menu);
        Vue.use(MenuItem);
        Vue.use(Submenu);
        Vue.use(Header);
        Vue.use(Main);
        Vue.use(Breadcrumb);
    }
}
export default element

1、这里要使用 Select 组件，必须同时使用 Option 和 OptionGroup
2、注意Layout需要引入的是Col和Row,Container 布局也需要单独引入Container,Header,Main,Aside
3、这里的 install 方法表示在 main.js 中，如果使用 Vue.use() 方法的话，则该方法默认会调用 install 方法,并把Vue传递过来

四、解决报错

1、如果报错Module build failed: Error: Couldn’t find preset “es2015” relative to directory

则执行

npm install babel-preset-es2015 --save-dev

2、报错These dependencies were not found:deepmerge,resize-observer-polyfill ,throttle-debounce/debounce
则执行

npm install --save deepmerge resize-observer-polyfill throttle-debounce/debounce