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()