vue结合element-ui实现按需加载

安装babel-plugin-component

npm install babel-plugin-component -D

修改文件.babelrc

 我们在找.babelc时，发现我们脚手架文件中有此文件，修改此文件即可。
我们的原文件内容如下:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

修改后:

{
  "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"
      }
    ]
  ]
}

 此时可能报错关于es2015的错误，错误如下：

解决方法：

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

按需加载对应的组件

import Vue from 'vue';
//按需加载Button和Select组件
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)
});