element按需引入组件，并模块化

安装babel-plugin-component

npm install babel-plugin-component -D

配置

vue3+版本直接在babel.config.js文件中的module.export下添加plugin选项

复制下面代码至配置文件中

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

模块配置

在src下创建global文件夹
目录结构

global
  module
    register-element.js
  index.js

代码

register-element.js

mport Vue from 'vue'
import { Input, Button, Select } from 'element-ui';

// 统一项目中所有拥有 size 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。
Vue.prototype.$ELEMENT = { size: 'mini', zIndex: 3000 };

const components = [Input,Select,Button]

export const registerApp = function () {
    for ( const component of components ) {
        Vue.use(component)
    }
}

index.js

import { registerApp } from './module/register-element'


export {
    registerApp
}

main.js

在main.js中引入并调用registerApp方法

 import * as globalComponents from './global'
 globalComponents.registerApp()