vue3按需引入Element Plus

使用element plus需要注意按需引入，全局引入会导致打包变大。 element plus版本保持在

    "element-plus": "^1.0.2-beta.62",

项目目录结构

第一步：安装依赖

npm install element-plus --save

第二步：安装配置babel-plugin

npm install babel-plugin-import -D

第三步：在项目根目录创建babel.config.js（如果有则直接添加）

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`
        }
      }
    ]
  ],
  presets: ['@vue/cli-plugin-babel/preset']
}

第四步: 在src下创建文件夹global，并在global文件夹下创建index.ts和register-element.ts

.global/index.ts

import { App } from 'vue'
import registerElement from './register-element'

export function globalRegister(app: App): void {
  app.use(registerElement)
}

./global/register-element.ts

import { App } from 'vue'
import 'element-plus/lib/theme-chalk/base.css'
import {
  ElButton,
  ElCheckbox,
  ElForm,
  ElFormItem,
  ElInput,
  ElLink,
  ElRadio,
  ElTabPane,
  ElTabs
} from 'element-plus'

const components = [
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadio,
  ElTabs,
  ElTabPane,
  ElCheckbox,
  ElLink
]

export default function (app: App): void {
  for (const component of components) {
    app.component(component.name, component)
  }
}

第五步：在main.js引入抽离的registerElement

import { createApp } from 'vue'
import App from './App.vue'
import { globalRegister } from './global' //导入

import router from './router'
import store from './store'

const app = createApp(App)
app.use(router)
app.use(store)
app.use(globalRegister) // 这里使用

app.mount('#app')