若依ruoyi——手把手教你制作自己的管理系统【二、修改样式】

阿里图标一(￣︶￣*))

图片白嫖一((*￣3￣)╭

********* 专栏略长 ==== 爆肝万字 ==== 细节狂魔 ==== 请准备好一键三连 *********

运行成功后：

在这里插入图片描述

idea后台正常先挂着我习惯用VScode操作当然如果有两台机子一个挂后台一个改前端就更好了

只需修改vue.config.js配置文件即可

eg：按 Win+R打开运行输入cmd 回车输入ipconfig 回车即可看到电脑IP地址

找到IPv4 地址: 192.111.0.111之类的就是了替换掉本地运行的http://localhost:8080

或者一台电脑运行前后端那就无需VScode了一个idea运行足以

当然若依也会替我们想到这些所以有更好的方法只运行前端无需后端（仅适用于修改样式）把http://localhost:8080 改为http://vue.ruoyi.vip/prod-api/

重启项目npm run dev

在这里插入图片描述

一ヽ(✿ﾟ▽ﾟ)ノ清理一下ヽ(✿ﾟ▽ﾟ)ノ

①.首页（先删改掉一会再处理源码字太多看着头疼）

在这里插入图片描述

②.若依官网导航栏隐藏下

在这里插入图片描述

③.右上方的几个按钮工具栏全局搜布局大小找到 Navbar.vue 按需注释即可

在这里插入图片描述

一一一一( •̀ .̫ •́ )✧一( •̀ .̫ •́ )✧一正片开始一( •̀ .̫ •́ )✧一( •̀ .̫ •́ )✧一一一一

1、换个背景和头像：

找到图片存放位置E:\ruoyi-demo\RuoYi-Vue\ruoyi-ui\src\assets\images 注意图片格式 .jpg

在这里插入图片描述

2、修改网页标题：

五处全部替换重启

在这里插入图片描述

捎带手改下登录页

在这里插入图片描述

3、修改侧面导航栏样式：

搜索关键字logoImg

更改文字title: ‘若依管理系统’,

不要图标logo: logoImg 改成 logo: false

更换图标找到RuoYi-Vue\ruoyi-ui\src\assets\logo 方法同上

在这里插入图片描述

修改颜色搜索关键字$base-logo-title-color 注释我写完了自定义修改看个人喜好

在这里插入图片描述

我按照右侧UI简单修改的样式：（$base-sidebar-width 为导航栏宽度）

$base-menu-color:hsla(0,0%,100%,.65);
$base-menu-color-active:#f4f4f5;
$base-menu-background:#001529;
$base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529;
$base-sub-menu-background:#000c17;
$base-sub-menu-hover:#004688b0;
$base-sidebar-width: 200px;

4、修改顶部导航栏标签页及面包屑样式：

原标签页及面包屑样式：

在这里插入图片描述