[vue-element-admin]-更改主题颜色

最新推荐文章于 2024-09-11 16:43:17 发布
最新推荐文章于 2024-09-11 16:43:17 发布
阅读量5.5k 收藏 20
点赞数 5
分类专栏： vue-element-admin 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013998349/article/details/110234195
版权
这篇博客介绍了如何在vue-element-admin项目中修改主题颜色，包括两部分：一是更改侧边栏颜色，通过修改`src/layout/components/Sidebar.index.vue`中引入的`variables.scss`文件，参考Element UI官网选择并替换颜色；二是调整顶部navbar的样式，可直接在`src/layout/components/Navbar.vue`中进行定制。
摘要由CSDN通过智能技术生成

更改主题颜色

一、更改侧边栏颜色

1、src/layout/components/Sidebar.index.vue

可以看到侧边栏的index.vue里面引入了’@/styles/variables.scss’样式
在这里插入图片描述

2、src/styles/variables.scss

去element官网的(Color 色彩)中
https://element.eleme.cn/#/zh-CN/component/color
去找自己想要的颜色，替换即可。

// sidebar
$menuText:#bfcbd9;//普通按钮字体颜色
$menuActiveText:#409EFF;//选择模块的字体颜色#F56C6C
$subMenuA
最低0.47元/天 解锁文章
骨月
关注
专栏目录
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 7113
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
vue-element-admin入门修改（一）
qq_45360390的博客
03-21 1706
修改网页侧边栏 修改网站名称，让侧边栏头部显示 文件路径：src/setting.jsTitle:"" //网页tittle; sidebarLogo：ture //默认是false 改为ture显示侧边栏头部 修改侧边栏头部名称 文件路径：src/layout/components/sidebar/logo.vuedata() { return { title: 'Oranjee', //侧边栏头部名称 logo: 'https://wpimg.wallstcn.com/69a
详解使用vue-admin-template的优化历程
08-27
主要介绍了详解使用vue-admin-template的优化历程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui实现自定义主题切换
最新发布
weixin_54937289的博客
09-11 1191
element-ui实现自定义主题切换。
更改vue-element-admin的主题颜色
qq_42786138的博客
04-08 883
更改vue-element-admin主题颜色 1.安装依赖包 cnpm i element-theme -g cnpm i element-theme-chalk -g 2： et -i // 将element-variables.scss文件移动到src下 在该.sass文件下最后添加代码 // 改变icon字体的路径，必须 $--font-path:'~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-
vue-admin-template框架下修改svg的颜色
qq_34672907的博客
04-05 2212
嘿嘿，好久不更博客啦。突然记起这个修改svg颜色这个挺好玩的，记录一下。哈哈哈哈，没想到svg还能这样玩。 需求：vue-admin-template里面某个模块鼠标滑过时里面的图标变颜色 首先解决方案有很多，改background-image,改img的路径。我都觉得这些最终都是要换图片，有没有直接在图片的基础上改个颜色就ok的。哈哈，svg一下子映入脑子。这玩意阿里icon-font都可以改颜色，啧啧，那么我是不是也可以尝试。 说干就干。百度走一波，首先看到一个哥们的博客。如图： https:/
vue-element-admin左侧导航栏的背景颜色更改
changyana的博客
08-05 2550
使用vue-element-admin默认的导航栏是如下图颜色。想要更改背景颜色需要找到相应的配置文件。
【Vue项目搭建】vue-admin-template修改（2）
qq_20623665的博客
12-24 670
单页面spa，切换都需要用户信息，此时用vuex存用户信息，切换时就不需要多次发送获取用户信息请求了。控制台根据类名查找（分散的style文件太多了，就不上图了，主要方法就是根据类名一个个找你要修改的）单独封装路由守卫 ，设置白名单，permission.js，鉴权。用vuex的同一个钩子，获取用户详细信息并存到vuex。退出清除vuex的token和和用户信息。点击退出后，返回登录界面，路径里的参数。stroke-width //线宽。stroke //画线颜色。fill //填充颜色。
vue-element-admin v4.4 指南.pdf
02-28
《vue-element-admin v4.4 指南》是一份详细的文档，主要针对基于Vue.js和Element-UI的后台前端解决方案vue-element-admin的v4.4版本进行深入讲解。这个项目旨在提供一个集成化的后台管理界面，包含了众多实用功能，...
vue-element-admin.zip
07-20
Vue.js Element Admin是一个基于Vue.js和Element UI的后台管理框架，用于快速构建现代Web应用程序。Vue.js是一个轻量级、高性能的前端JavaScript框架，而Element UI则是一个流行的UI组件库，提供了丰富的界面元素和...
vite-vue-elementplus-admin.rar
09-18
同时，ElementPlus还支持自定义主题，可以根据项目需求调整颜色和样式。 4. **前端后台管理**：后台管理系统通常包含登录验证、权限管理、导航菜单、数据展示、表单处理等功能。Vue3和ElementPlus的组合，加上Vite2...
【vue】更改vue-element-admin的主题色
@point
08-18 2172
2、src/styles/variables.scss 去element官网的(Color 色彩)中https://element.eleme.cn/#/zh-CN/component/color 去找自己想要的颜色，替换即可。 // sidebar $menuText:#bfcbd9;//普通按钮字体颜色 $menuActiveText:#409EFF;//选择模块的字体颜色#F56C6C $subMenuActiveText:#f4f4f5; //选中模块父级按钮字体颜色#E6A23C $men
vue-template-admin项目的主题样式设置
weixin_42349568的博客
11-07 1707
可以直接import css文件，而不可以直接import scss文件， 所以一些样式文件虽然scss结尾，但是样式中是没有scss特殊语法的，所以直接引入到。而这里的’./variables.scss’和’./mixin.scss’才有scss特殊语法，所以它两想要在页面中进行使用，还需要按需引入。按照官网所说，本项目没有设置自动注入 sass 的 mixin 到全局，所以需要在使用的地方手动引入 mixin。现在，我想让这两个文件全局引入，然后页面中不再需要每次要使用都得引入一次。
vue-element-admin之修改登录页面背景
jiezhang656的专栏
07-10 3257
之前将要更新的背景图放在了项目中src/assets/下面，比如背景图片的路径为../src/assets/bg.jpg，然后设置后运行一直报错，提示的错误意思主要是找不到。最后看了网上的文章，抱着试一试的心态，更改了背景图的路径，在assets目录下新建login_images文件夹，将背景图放在该目录下，路径为../src/assets/login_images/bg.jpg。重新运行就成功了。下面将修改的内容贴出来：1、路径要对，这是关键； 2、登录页面的路径是：src/views/login/ind
【Vue项目搭建】vue-admin-template修改（3）
qq_20623665的博客
12-25 166
设置动态路由规则//根据账号权限，显示隐藏。静态路由，不需要权限就可以进入。路由管理对象，合并路由规则。路由守卫，获取用户信息优化。删除路由，根据业务调整。新建路由模块，规则模块。使用icon的svg图标。
Vue - vue-admin-template模板项目改造：增加TopHeader（顶栏）
iotjin的专栏
12-18 5104
GitHub Demo 地址 在线预览 前言 demo中的项目已经添加了TagsView功能和权限控制 关于TagsView功能的添加可以看：Vue - vue-admin-template模板项目改造：增加TagsView功能 有时项目需要在顶部显示一个header，在顶栏中显示项目标题和用户信息，这时需要对模块项目进行改造 demo项目中在原有的基础上进行了扩展，即可以支持原有方式展示，又可以通过setting配置显示顶栏 效果图 tagsView topHeader + 隐藏logo.
vue2自定义切换主题 dark暗黑主题（暗黑模式）
qq_36828272的博客
05-05 4531
vue2实现自定义的主题切换方案，例如暗黑主题切换，可自定义颜色和主题的数量，支持修改组件内部的颜色样式，例如Element UI
vue-element-admin 主体颜色更换
qq_42877655的博客
06-15 1149
vue-element-admin 主体颜色更换
修改vue-element-admin侧边栏图标颜色
weixin_43743148的博客
03-16 2253
vue-element-admin快速开发后台系统模板
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值