修改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,对左侧导航栏的背景进行了修改,改成了自己设计稿上的颜色啦。

相关文章
|
JavaScript 索引
【vue】element ui 实现动态表单点击按钮新增行/删除行
【vue】element ui 实现动态表单点击按钮新增行/删除行
3437 0
|
2月前
|
JavaScript 容器
vue-element-admin 综合开发二:搭建首页架子、侧边栏、修改默认样式、menu和路由跳转页面初体验
这篇文章详细介绍了如何使用Vue和Element UI搭建一个后台管理系统,包括首页布局、侧边栏、样式调整、菜单和路由配置,以及解决开发中遇到的问题。
120 1
vue-element-admin 综合开发二:搭建首页架子、侧边栏、修改默认样式、menu和路由跳转页面初体验
|
7月前
vue-element-admin—登录页面添加自定义背景
vue-element-admin—登录页面添加自定义背景
377 0
uni-app动态修改顶部原生导航栏文字跟颜色
uni-app动态修改顶部原生导航栏文字跟颜色
352 0
|
前端开发
Vue3对话框样式修改不了
今天还是说说Vue3引用elementplus组件的问题,今天想说的是设置对话框样式的问题,即如何去修改对话框的样式,特别是在已经全局定义了对话框的样式的情况下怎么去修改组件内的对话框样式
337 0
Vue3对话框样式修改不了
|
JavaScript 前端开发 程序员
修改vue-element-admin左侧导航栏的图标
修改vue-element-admin左侧导航栏的图标
208 0
vue2.0 + element-ui 实战项目-导航栏跳转路由(二)
vue2.0 + element-ui 实战项目-导航栏跳转路由(二)
167 0
|
JavaScript
Vue框架Element UI教程-左侧导航栏(四)
Vue框架Element UI教程-左侧导航栏(四)
207 0
|
JavaScript
vue element-ui 菜单管理使用图标选择器组件
vue element-ui 菜单管理使用图标选择器组件
556 0
Vue--element实现新增会员对话框
Vue--element实现新增会员对话框