element按需加载

element按需加载

安装element

npm i element-ui -S

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D
安装完成后项目中会出现babel.config.js或者babelrc文件在里面增加配置就可以了

{
 "presets": [
    ["env",{ "modules": false}],
    ["es2015", {"modules": false}],
  ],
  "plugins": ["transform-runtime", "transform-vue-jsx", ["component",[
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env","stage-2"],
      "plugins": ["istanbul"]
    }
  }
}
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

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)
});