主要步骤
element plus 快速开始官方指南。
首先使用 vite 创建一个 vue3 项目,请参考以往文章,不在赘述。
安装 element-plus
1
| npm install element-plus --save
|
安装 unplugin-vue-components、unplugin-auto-import、sass
1
| npm install -D unplugin-vue-components unplugin-auto-import sass
|
新建一个样式文件,覆盖 Element Plus 的 scss 变量。
1 2 3 4 5 6 7 8 9 10 11 12 13
| // src/styles/element/index.scss /* 只需要重写你需要的即可 */ @forward 'element-plus/theme-chalk/src/common/var.scss' with ( $colors: ( 'primary': ( 'base': green, ), ), );
// 如果只是按需导入,则可以忽略以下内容。 // 如果你想导入所有样式: @use 'element-plus/theme-chalk/src/index.scss' as *;
|
在 main.js 引入 scss 变量
1 2 3 4 5 6 7 8 9 10 11
| import { createApp } from 'vue' import './style.css' import App from './App.vue'
import ElementPlus from 'element-plus'
import './styles/element/index.scss'
createApp(App).use(ElementPlus).mount('#app')
|
修改 vite.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
| import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import {ElementPlusResolver} from 'unplugin-vue-components/resolvers' import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')
export default defineConfig({ resolve: { alias: { '~/': `${pathSrc}/`, }, }, css: { preprocessorOptions: { scss: { }, }, }, plugins: [ vue(), AutoImport({ resolvers: [ ElementPlusResolver({ importStyle: "sass", }) ], }), Components({ resolvers: [ ElementPlusResolver({ importStyle: 'sass', }), ], }), ],
})
|