首先在代码中引入use-element-plus-theme并设置默认的主题色: 代码语言:javascript 复制 import{useStorage}from'@vueuse/core';import{useElementPlusTheme}from'use-element-plus-theme';constlayoutThemeColor=useStorage('layout-theme-color','#243db9');// 默认主题色const{changeTheme}=useElementPlusTheme(lay...
1 npm i@vueuse/corenpm install element-plus --save 在main.js中引入css文件,自定义深色背景颜色 可以看ElementPlus官方网站 //引入elementUIimport ElementPlus from 'element-plus'import zhCn from'element-plus/dist/locale/zh-cn.mjs'//引入暗黑模式import 'element-plus/theme-chalk/dark/css-vars.css' ...
路径:src/theme/global.less(先建一个theme目录) // 默认主题 因为会放在rgba()中 所以只需要rgb这三个值 使用rgba的好处是一个主题可以根据透明度配置更多相似主题的颜色 @themeColor: var(--themeColor, 100, 149, 237); 1. 2. 4.配置vue.config.js vue.config.js是项目可选的配置文件 路径: 与packag...
对ElementPlus样式进行覆盖通知Element采用scss语言 -> 导入定制scss文件覆盖 自动导入配置 这里自动导入需要深入到elementPlus的组件中,按照官方的配置文档来 自动导入定制化样式文件进行样式覆盖 按需定制主题配置 (需要安装 unplugin-element-plus) vite.config.js文件中: import{ fileURLToPath,URL}from'node:url'impo...
vue3+vite配置elementPlus主题需要安装一下两个插件: unplugin-vue-components unplugin-auto-import 开始配置: 第一步、安装插件 pnpm install -D unplugin-vue-components unplugin-auto-import// 我这里使用pnpm安装,当然大家如果没有配置安装pnpm可以使用npm/cnpm ...
查看element-Plus样式源码 elementPlus/theme-chalk/src/common/var.scss. 你会发现组件的颜色是基本都基于主色调和次色调的全局变量,这就是为什么要覆盖变量的原因。 核心代码如下,这段 scss 就是生成 --el-color-primari-light-num 这些次级色调的。可以看到这里使用了一盒sass颜色函数mix,这个函数是如何实现的暂...
:root{--el-color-primary:#d5140f} 在main.js 或者 main.ts 中引入文件 import'./assets/main.css'import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'importrouterfrom'./router'importinitPluginsfrom'@/plugins';import'element-plus/dist/index.css'import'@/assets/style...
vue3 elementplus 快速使用图标 elementui桌面应用,最近需要用Node.js做一个桌面的应用,了解到electron可以用来做跨平台的桌面应用,而vue可以用来作为界面的解决方案,研究了一会儿如何把他们两个整合到一起使用,遇到了各种问题而放弃,毕竟作为一个非前端开发人员我的
vue3中修改element plus 主题色,有两种方式 一、使用 :root 方式设置变量进行覆盖 1.1文件夹 styles 下新建一个 element-variarbles.scss文件 :root { –el-color-primary: red; } 1.2 main 文件中引入 import ‘element-plus/dist/index.css’ import ‘@/styles/element-variables.scss’ ...
项目用到vue3、element-plus,使用vite构建,自定义主题,记录如下: 1、搭建一个vite + vue项目 # npm 6.xnpm create vite@latest my-vue-app--templatevue# npm 7+, extra double-dash is needed:npm create vite@latest my-vue-app---templatevue 2...