Vue3按需引入Element Plus以及定制主题色教程
作者：未及545
由于涉及到vue框架单网页应用首屏加载慢这个问题,我们需尽量减少加载负担,故采用按需引入的方式,只引入项目中用到的组件,这篇文章主要给大家介绍了关于Vue3按需引入Element Plus以及定制主题色的相关资料,需要的朋友可以参考下
1.首先使用指令进行安装
npm install element-plus --save
2.安装按需引入另外两个插件
npm install -D unplugin-vue-components unplugin-auto-import
3.在vite.config.js文件引入以下内容
import { fileURLToPath, URL } from 'node:url'
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'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})此时在App.vue引入button按钮，可看到效果如下，便引入成功：
4.如果不想用上述色调，要定制自己的怎么操作
如下：
安装scss
npm i sass -D (-D代表安装在开发环境的依赖)
准备定制样式文件（在styles文件创建element文件以及下的index.scss文件）
styles/element/index.scss
//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,
),
)
)配置elementPlus采用sass样式配色系统
自动导入定制化样式文件进行样式覆盖
在vite.config.js文件
import { fileURLToPath, URL } from 'node:url'
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'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
// 配置elementPlus采用sass样式配色系统
resolvers: [ElementPlusResolver({ importStyle: "sass" })],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 自动导入定制化样式文件进行样式覆盖
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/element/index.scss" as *;`
}
}
}
})修改好配置文件记得重新启动哦~
样式如下，和官网样式对比有了很明显变化，证明起了作用：
总结
到此这篇关于Vue3按需引入Element Plus以及定制主题色的文章就介绍到这了,更多相关Vue3按需引入Element Plus内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！