[JavaScript知识库]Vue3.0中element-plus按需引入

首先安装一个按需导入插件

yarn add 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']
};

创建一个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);
  }
}

然后创建一个入口文件,index.ts

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

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

然后去到我们的main.ts中

import { globalRegister } from './global';
app.use(globalRegister);

完事，之后在页面中什么都不用引入，直接使用我们在register-element.ts中定义的组件就行