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

ゝ一世哀愁。 2022-12-23 13:25 384阅读 0赞

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

推荐指数：star:62.1k  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]

文档：[https://panjiachen.github.io/vue-element-admin-site/zh/][https_panjiachen.github.io_vue-element-admin-site_zh]

![5c1592ee727e352cc2407a45423402a7.png][]

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

1：去github上面下载或者克隆  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
我这里使用简单粗暴的方式，直接下点击载按钮

![2f408f78eaf114ef0d3c91780a1f3c21.png][]

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

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

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

![77035b5797dd0046b5ca8655e26dbf6b.png][]

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

![c01dd31df107ee9357e1f518008208b9.png][]

image

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

npm run dev

![500572621ae05c6fd3f289f30ad65930.png][]

4：浏览器打开  
运行成功就使用浏览器打开[http://localhost:9527/][http_localhost_9527]

![e525f32330aa0fef551aeb63e38b1040.png][]

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

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

今天需要在我们的vue-element-admin原有的系统里面，修改一下导航栏的颜色。  
原有系统的左侧的导航栏的颜色是这个样子的

![63f8f8ab3b8518cb400ded1dd2bafd58.png][]

1:找到

![8691df678e75d27286f4aec5471b9edf.png][]

![ec86c0afd7776a7afb3ebb8097729c0d.png][]

![b5da9688c32cfe1bcdbd4d12689f13c1.png][]

3：

![236fb0d66cacf36cd1412772979e505c.png][]

4：改写css代码

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

![eea92a365dd147b6c7627d3cc8e3eeed.png][]

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

![0cee9612fc20ddcb7fcd79b69cedcb41.png][]

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[https_panjiachen.github.io_vue-element-admin-site_zh]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin-site%2Fzh%2F
[5c1592ee727e352cc2407a45423402a7.png]: /images/20221120/89c099d5c00b436a9aa7fd1e7fb3c405.png
[2f408f78eaf114ef0d3c91780a1f3c21.png]: /images/20221120/0ad1c9c570b646fd9e8c51484e7e4e07.png
[77035b5797dd0046b5ca8655e26dbf6b.png]: /images/20221120/bc711f9425654cb1848f4d22e106d3e2.png
[c01dd31df107ee9357e1f518008208b9.png]: /images/20221120/01cac89aa900421d955810b445df84e5.png
[500572621ae05c6fd3f289f30ad65930.png]: /images/20221120/55e9b4e22f05468e8a9decc621201b45.png
[http_localhost_9527]: https://links.jianshu.com/go?to=http%3A%2F%2Flocalhost%3A9527%2F
[e525f32330aa0fef551aeb63e38b1040.png]: /images/20221120/f302a36629c444aa8f6011d595b6925f.png
[63f8f8ab3b8518cb400ded1dd2bafd58.png]: /images/20221120/0f1871f3489e4fea890dd43b33864e58.png
[8691df678e75d27286f4aec5471b9edf.png]: /images/20221120/98a25fde65554a04b78dfa0cdcb4c821.png
[ec86c0afd7776a7afb3ebb8097729c0d.png]: /images/20221120/efdcda5dfefe409a8b0986bad4b6f9ad.png
[b5da9688c32cfe1bcdbd4d12689f13c1.png]: /images/20221120/60819e0462334ec8bb5dae1fa5157de7.png
[236fb0d66cacf36cd1412772979e505c.png]: /images/20221120/de1be6b72a9145ac91eb84b1fc9c7db1.png
[eea92a365dd147b6c7627d3cc8e3eeed.png]: /images/20221120/21c81ea63eaf4b2aa79610d49aff8f3f.png
[0cee9612fc20ddcb7fcd79b69cedcb41.png]: /images/20221120/b0a59814f4fe489a8ee2ce0fb3590cbc.png