element-plus 按需引入

在src 创建global文件夹

1.在文件夹新建 index.ts和register-element.ts

image.png

index.ts

import { App } from "vue";

import registerElement from "./register-element";

export function globalRegister(app: App): void {
  app.use(registerElement);
  // registerElement(app);   //也可以这么写
}

register-element.ts

import { App } from "vue";

import "element-plus/dist/index.css";

import {
  ElAlert,
  ElAside,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadio,
} from "element-plus";

const components = [
  ElAlert,
  ElAside,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadio,
];

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

在main.ts 里

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { globalRegister } from "./global";

const app = createApp(App);

app.use(globalRegister);
// globalRegister(app); 也可以这么写

app.use(store).use(router).mount("#app");

使用按钮

image.png