element ui按需加载

1、安装插件 babel-plugin-component

npm install babel-plugin-component -D
yarn add babel-plugin-component

2、打开项目根目录下的 babel.config.js 文件，配置代码如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
         "ext":".scss",//需要scss时加上
      }
    ]
  ]
}```
3、封装element UI模块
新建 /src/components/plugins/element.js' 文件，index.js 示例代码如下：

```javascript
import Vue from 'vue'
import { Button, Form, FormItem, Input, DatePicker, Dialog, Table, Pagination, Drawer } from 'element-ui';
const customElement = {
    install: function (Vue) {
        Vue.component('ElButton', Button);
        Vue.component('ElForm', Form);
        Vue.component('ElFormItem', FormItem);
        Vue.component('ElInput', Input);
        Vue.component('ElDatePicker', DatePicker);
        Vue.component('ElDialog', Dialog);
        Vue.component('ElTable', Table);
        Vue.component('ElPagination', Pagination);
        Vue.component('ElDrawer', Drawer);
    }
};
export default customElement;

//这里提个醒
//MessageBox，Message,Notification这三个组件只能挂载Vue原型上调用，
//不能使用Vue.use()；否则项目运行会默认执行一次，即使没有使用它们

4、挂载到main.js

import '@/plugins/element.js'

import customElement from '@/components/plugins/element.js';
Vue.use(customElement);
import { Message,MessageBox,Notification } from 'element-ui';
Vue.prototype.$message = Message;
Vue.prototype.$messageBox = MessageBox;
Vue.prototype.$noticefy = Notification;