掌握分寸感，找目标一致的人协同你，有效地调配资源，就可以提高效率。

写在前面的话：博主最近想要搭建自己的前端若依项目，因此此系列博客会做一些记录。我的项目gitee地址： https://gitee.com/xuruicong/rachel-front-show

说明：只运行前端项目，只需要要下载官方项目http://www.ruoyi.vip/ 修改vue.config.js文件中的target: `http://localhost:8080`为：

修改效果预览： 

目录

  一、修改左侧导航栏sidebar

 1. 修改系统logo

2. 修改菜单栏颜色

 二、修改顶部导航栏Navbar

1. 删除部分工具栏

 2. 修改默认头像

三、修改面包屑hamburger

1. 修改收起展开图标和标题 

2. 不显示tagsview

3. 添加自定义面包屑

四、修改全局边距

（tips: 全局搜索sidebar-title）

src-->layout-->component-->sidebar-->  Logo.vue

只需要修改对应的图标logo.png即可

（tips:全局搜索.sidebar-container）

src-->layout-->component-->sidebar--> SidebarItem.vue

src-->assets-->styles-->sidebar.scss

src-->assets-->styles-->  variables.scss

如果还想要修改 激活的菜单的样式需要在sidebar.scss中添加和修改如下代码：

修改之后的效果如下：

src-->layout-->component-->Navbar.vue

（tips：全局搜索profile.jpg）

src-->store-->modules-->user.js

替换profile.jpg图片即可

src-->layout-->component-->Navbar.vue

注释掉面包屑部分，我们一会自己写

src-->component-->Hamburger--> index.vue

在全局settings文件中，若以框架已经定义了是否显示tagsView,设置属性为false即可。

src-->layout-->component-->Navbar.vue

 需要修改Navbar的高度，并添加面包屑

由于修改了navbar的高从50px--->100px,会影响页面整个的高度。（整个页面的高度是100vh，下面内容app-main的高度就是100vh-navbar的高度）因此需要修改app-main高度

src--> layout-->components-->AppMain.vue

但是希望去掉首页/，因为不是所有页面都是通过首页进入的。

src-->components-->Breadcrumb-->index.vue

注释掉默认的首页即可

可以看到 ，所有页面都包含在app-container下的，如果需要修改样式则需呀修改全局的app-container样式。

src-->assets-->styles-->index.scss

最终页面效果如下：