vue学习-封装element-plus局部引用

在vue中全局都需要使用的放入一个单独的文件夹中

在register-element.ts 中

import { App } from "vue";
import "element-plus/dist/index.css"  //引入的全部css
//局部导入的路径
import { ElAlert, ElAside, ElButton, ElInput } from "element-plus/lib/components"

const components = [ElButton, ElAside, ElAlert, ElInput];

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

在index.ts中 导入register-element文件

import {App} from 'vue'
import reisterElement from './register-element'
export function registerApp(app:App):void{
  reisterElement(app)
}

在main.ts中导入

import { registerApp } from "./golbal";
const app = createApp(App);
registerApp(app)
app.use(store).use(router).mount("#app");