Vue3+TS+Elementui-Plus 局部引用封装

针对Elementui-Plus 插件"element-plus": "^1.0.2-beta.60"以下的版本，最新版本还是要引入 import "element-plus/lib/theme-chalk/index.css" 才能起效果。

1.安装babel的插件

 npm install babel-plugin-import -D

2.配置babel.config.js

当我们在element-plus引入组件的时候 我们去找 为 name 的样式
module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: "element-plus",
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`
        }
      }
    ]
  ],
  presets: ["@vue/cli-plugin-babel/preset"]
}

3.在src下新建一个global文件夹

在global文件夹下新建index.ts 和 register-element.ts 两个文件

//index.ts

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

export function globalRegister(app: App): void {
  app.use(registerElement) //加载elementui 插件
  //以后还可以注册其他插件
}

//register-element.ts

//单独对elementui 进行封装
import { App } from "vue"
import "element-plus/lib/theme-chalk/base.css"

import { ElButton,ElAlert } from "element-plus/lib/components"

const components = [ElButton,ElAlert ] //需要加载的组件往后追加

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

4.最后在 main.ts 引用 global下的index.ts文件,并注册组件

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


const app = createApp(App)
app.use(globalRegister)

app.mount("#app")