1. 首选无论是按需引入还是全引入都需要先安装elementPlus
npm i element-plus
2. 按需引入elementPlus,可参照官网
a. 安装unplugin-vue-components
和 unplugin-auto-import
npm install -D unplugin-vue-components unplugin-auto-import
b. 配置vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
3. 在src下新建一个文件来覆盖element样式,我的路径是 @/styles/element/index.scss
// @/styles/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss'with ($colors: (
"primary":(
"base":#27ba9b,
),
"success":(
"base":#1dc779,
),
"warning":(
"base":#ffb302,
),
"danger":(
"base":#e26237,
),
"error":(
"base":#cf4444,
), //修改其他颜色在下边接着写就可以
))
4. 安装sass,配置elementPlus采用sass样式配色系统
npm i sass -D
5. 配置vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
resolve
} from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
// 配置elementPlus采用sass样式配置系统
resolvers: [ElementPlusResolver({ importStyle: "sass" })],
}),
],
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
}
},
css: {
preprocessorOptions: {
scss: {
// 自动导入定制化样式进行文件覆盖
additionalData: `
@use "@/styles/element/index.scss" as *;
`
}
},
}
})
6. 现在就可以在页面中引入element啦,样式已经成功覆盖啦!