针对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")