修改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 前端开发
js时间戳转日期时间
js时间戳转日期时间
818 76
|
SQL XML JavaScript
【若依Java】15分钟玩转若依二次开发,新手小白半小时实现前后端分离项目,springboot+vue3+Element Plus+vite实现Java项目和管理后台网站功能
摘要: 本文档详细介绍了如何使用若依框架快速搭建一个基于SpringBoot和Vue3的前后端分离的Java管理后台。教程涵盖了技术点、准备工作、启动项目、自动生成代码、数据库配置、菜单管理、代码下载和导入、自定义主题样式、代码生成、启动Vue3项目、修改代码、以及对代码进行自定义和扩展,例如单表和主子表的代码生成、树形表的实现、商品列表和分类列表的改造等。整个过程详细地指导了如何从下载项目到配置数据库,再到生成Java和Vue3代码,最后实现前后端的运行和功能定制。此外,还提供了关于软件安装、环境变量配置和代码自动生成的注意事项。
32044 73
|
关系型数据库 MySQL Linux
MySQL版本升级(8.0.31->8.0.37)
本次升级将MySQL从8.0.31升级到8.0.37,采用就地升级方式。具体步骤包括:停止MySQL服务、备份数据目录、下载并解压新版本的RPM包,使用`yum update`命令更新已安装的MySQL组件,最后启动MySQL服务并验证版本。整个过程需确保所有相关RPM包一同升级,避免部分包遗漏导致的问题。官方文档提供了详细指导,确保升级顺利进行。
1585 16
|
JavaScript 前端开发 API
一个非常 nb 的 Vue 组件 (含Vue3版本)
一个非常 nb 的 Vue 组件 (含Vue3版本)
在 setup 函数中使用 computed 计算属性
【10月更文挑战第23天】在 Vue3 中,`computed` 计算属性为我们提供了一种方便且高效的方式来处理基于其他响应式数据的派生数据。在 `setup` 函数中使用 `computed` 计算属性,可以让我们更好地组织和管理组件的逻辑。
|
开发框架 监控 JavaScript
基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结
基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结
给input框设置成选择日期,并且精确到时分秒
给input框设置成选择日期,并且精确到时分秒
1121 1
|
JavaScript
vue admin template 侧边栏及顶部栏演示字体样式修改
vue admin template 侧边栏及顶部栏演示字体样式修改
877 0
|
NoSQL 数据建模 API
UCX-UCT统一通信传输层3-服务端和客户端调用栈详解(及相关)_源码解读
主流程(服务端或客户端): 1. 主函数中解析命令行参数(parse_cmd), 设置默认服务端口 2. 初始化上下文(ucs_async_context_create, 异步事件上下文用于管理定时器和FD通知), 在其中, 初始化多生产者/多消费者队列(ucs_mpmc_queue_init), 初始化非阻塞异步轮询器(ucs_async_poll_init), 初始化可重入自旋锁上下文等 3. 创建工人(uct_worker_create), 工人代表着 progress 的引擎。 可以在应用程序中创建多个进度引擎,例如供多个线程使用 4. 根据入参查找期望的传输层(dev_tl_loo
1063 1
|
JavaScript
国庆总结:echarts自定义颜色主题,保证你看的明明白白
国庆总结:echarts自定义颜色主题,保证你看的明明白白
国庆总结:echarts自定义颜色主题,保证你看的明明白白

热门文章

最新文章