vue3 按需引入element-plus(手动按需引入)

1,665 阅读1分钟

vue3版本:3.2.26

element-plus版本:1.3.0-beta.5

添加一些两个文件,然后在createApp后,引入 globalRegister(app)即可。

/**
 * @file index.ts
 * @desc 在入口处注册组件
 */
import { App } from "vue";
import registerElement from "./element-plus-config";

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

/**
 * @file element-plus-config.ts
 * @desc 按需注册组件
 * @desc 【如何注册新组件】需要 从element-plus引入组件、添加css、在components数组中添加组件名
 */

import { App } from "vue";
import "element-plus/dist/index.css";
import {
  ElButton,
  ElTooltip,
  ElPopper,
  ElForm, 
  ElFormItem,
  ElInput,
  ElRadio
} from "element-plus";
import 'element-plus/theme-chalk/el-button.css';
import 'element-plus/theme-chalk/el-tooltip.css';
import 'element-plus/theme-chalk/el-popper.css';
import 'element-plus/theme-chalk/el-form.css';
import 'element-plus/theme-chalk/el-form-item.css';
import 'element-plus/theme-chalk/el-input.css';
import 'element-plus/theme-chalk/el-radio.css';

const components = [
    ElButton,
    ElTooltip,
    ElPopper,
    ElForm,
    ElFormItem,
    ElInput,
    ElRadio,
];

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