修改vue-element-admin左侧导航栏的背景颜色

简介: 修改vue-element-admin左侧导航栏的背景颜色

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和维护人员,开发时候遇到问题也不要慌。


今天就来说一下,怎使用这个模板,以及写好了项目,怎么样把项目打包成静态文件,部署在服务器上。

1:去github上面下载或者克隆

我这里使用简单粗暴的方式,直接下点击载按钮


2:把项目导入vscode,点开终端,并且在项目里面安装依赖。

npm install --registry=https://registry.npm.taobao.org

建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题


安装完成会发现项目目录中多了一个依赖文件夹


3:运行本地开发 启动项目

npm run dev


4:浏览器打开

运行成功就使用浏览器打开http://localhost:9527/


可以在这个后台管理系统的模板的基础上,修改一些自己需要的代码,变成自己的开发的项目了,此处自行发挥,省略一万字。

修改vue-element-admin左侧导航栏的颜色

今天需要在我们的vue-element-admin原有的系统里面,修改一下导航栏的颜色。

原有系统的左侧的导航栏的颜色是这个样子的


1:找到


3:

4:改写css代码

$menuBg:#30419B; // 菜单整体背景
$menuHover: #3F4FA2; // 菜单悬浮变色
$subMenuBg:#30419B; // 子菜单背景
$subMenuHover:#3F4FA2; // 子菜单悬浮背景

ok,对左侧导航栏的背景进行了修改,改成了自己设计稿上的颜色啦。

相关文章
|
Web App开发 测试技术
Selenium+python之隐藏浏览器的“Chrome正在受到自动软件的控制“提示语
Selenium+python之隐藏浏览器的“Chrome正在受到自动软件的控制“提示语
774 0
安装MySQ报错 warning: /var/cache/yum/x86_64/7/mysql80-community/packages/mysql-community-client-8.0.
安装MySQ报错 warning: /var/cache/yum/x86_64/7/mysql80-community/packages/mysql-community-client-8.0.
1808 1
安装MySQ报错 warning: /var/cache/yum/x86_64/7/mysql80-community/packages/mysql-community-client-8.0.
|
8月前
|
前端开发 程序员
墨刀原型图的原理、与UI设计图的区别及转换方法详解-卓伊凡|贝贝
墨刀原型图的原理、与UI设计图的区别及转换方法详解-卓伊凡|贝贝
803 24
墨刀原型图的原理、与UI设计图的区别及转换方法详解-卓伊凡|贝贝
|
存储 Java Linux
【Maven】——基础入门,插件安装、配置和简单使用,Maven如何设置国内源
Maven插件安装,Maven项目构建,依赖管理,Haven Help插件,Maven仓库,Maven如何设置国内源
|
关系型数据库 MySQL Linux
MySQL版本升级(8.0.31->8.0.37)
本次升级将MySQL从8.0.31升级到8.0.37,采用就地升级方式。具体步骤包括:停止MySQL服务、备份数据目录、下载并解压新版本的RPM包,使用`yum update`命令更新已安装的MySQL组件,最后启动MySQL服务并验证版本。整个过程需确保所有相关RPM包一同升级,避免部分包遗漏导致的问题。官方文档提供了详细指导,确保升级顺利进行。
1431 16
|
JavaScript 前端开发 API
一个非常 nb 的 Vue 组件 (含Vue3版本)
一个非常 nb 的 Vue 组件 (含Vue3版本)
|
存储 搜索推荐 数据建模
阿里巴巴大数据实践之数据建模:构建企业级数据湖
阿里巴巴通过构建高效的数据湖和实施先进的数据建模策略,实现了数据驱动的业务增长。这些实践不仅提升了内部运营效率,也为客户提供了更好的服务体验。随着数据量的不断增长和技术的不断创新,阿里巴巴将持续优化其数据建模方法,以适应未来的变化和发展。
|
JavaScript 前端开发 开发者
Web Components详解-Shadow DOM基础
Web Components详解-Shadow DOM基础
636 1
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
2871 0
给input框设置成选择日期,并且精确到时分秒
给input框设置成选择日期,并且精确到时分秒
967 1

热门文章

最新文章