【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式

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

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

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

target: `http://vue.ruoyi.vip/prod-api/`,

---

修改效果预览： 

---

目录

  一、修改左侧导航栏sidebar

 1. 修改系统logo

2. 修改菜单栏颜色

 二、修改顶部导航栏Navbar

1. 删除部分工具栏

 2. 修改默认头像

三、修改面包屑hamburger

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

2. 不显示tagsview

3. 添加自定义面包屑

四、修改全局边距

---

  一、修改左侧导航栏sidebar

 1. 修改系统logo

（tips: 全局搜索sidebar-title）

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

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

2. 修改菜单栏颜色

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

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

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

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

1. // variable.scss
2. // 默认菜单主题风格
3. $base-menu-color: #333333; // 菜单全部字体颜色
4. $base-menu-color-active: #e60012; // 父级菜单激活的字体颜色
5. $base-menu-background: #fff; // 菜单栏背景颜色（非激活状态）
6. $base-logo-title-color: #e60012; // 系统标题颜色
8. $base-menu-light-color: rgba(0, 0, 0, 0.7);
9. $base-menu-light-background: #e60012; // 选中菜单的字体颜色
10. $base-logo-light-title-color: #fff; // 对应base-logo-title-color
12. $base-sub-menu-background: #f5f7fa; // 选中的菜单的子菜单背景颜色
13. $base-sub-menu-hover: #f7f0f1; // 子菜单hover背景颜色

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

1. // sidebar.scss
2. .el-menu-item.is-active {
3. color: #e60012 !important;
4. background-color: $base-sub-menu-hover !important; // 点击菜单的颜色
5. &:hover {
6. background-color: $base-sub-menu-hover !important;
7. }
8. }
10. // menu hover
11. .submenu-title-noDropdown, .el-submenu__title {
12. &:hover {
13. background-color: $base-sub-menu-hover !important;
14. }
15. }
17. & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
18. & .theme-dark .el-submenu .el-menu-item {
19. // background-color: $base-sub-menu-background !important;
20. color: #333333 !important;
21. background-color: #fff;
23. &:hover {
24. background-color: $base-sub-menu-hover !important;
25. }
26. }

修改之后的效果如下：

 二、修改顶部导航栏Navbar

1. 删除部分工具栏

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

 2. 修改默认头像

（tips：全局搜索profile.jpg）

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

替换profile.jpg图片即可

三、修改面包屑hamburger

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

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

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

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

1. // humburger index.vue
2. <template>
3. <div style="padding: 0 15px; display: flex">
4. <img
5. src="../../assets/logo/svg.png"
6. @click="toggleClick"
7. :class="{ 'is-active': isActive }"
8. class="hamburger"
9. />
10. <div class="nabar-title">综合管理系统div>
11. div>
12. template>

1. <style scoped>
2. .hamburger {
3. display: inline-block;
4. vertical-align: middle;
5. margin-top: 18px;
6. width: 16px;
7. color: #e60012;
8. height: 16px;
9. margin-left: 6px;
10. }
12. .hamburger.is-active {
13. transform: rotate(180deg);
14. }
15. .nabar-title {
16. margin-left: 18px;
17. height: 100%;
18. width: 200px;
19. line-height: 54px;
20. color: #e60012;
21. font-weight: 600;
22. vertical-align: middle;
23. }
24. style>

2. 不显示tagsview

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

1. /**
2. * 是否显示 tagsView
3. */
4. tagsView: true,

 

 3. 添加自定义面包屑

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

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

1. // Navbar.vue
2. <template>
3. <div class="navbar">
4. <div style="background: #fff">
5. <hamburger
6. id="hamburger-container"
7. :is-active="sidebar.opened"
8. class="hamburger-container"
9. @toggleClick="toggleSideBar"
10. />
14. <div class="right-menu">
15. <el-dropdown
16. class="avatar-container right-menu-item hover-effect"
17. trigger="click"
18. >
19. <div class="avatar-wrapper">
20. <img :src="avatar" class="user-avatar" />
21. <i class="el-icon-caret-bottom" />
22. div>
23. <el-dropdown-menu slot="dropdown">
24. <router-link to="/user/profile">
25. <el-dropdown-item>个人中心el-dropdown-item>
26. router-link>
28. <el-dropdown-item divided @click.native="logout">
29. <span>退出登录span>
30. el-dropdown-item>
31. el-dropdown-menu>
32. el-dropdown>
33. div>
34. div>
36. <div class="new-breadcrumb">
37. <i
38. class="el-icon-location-outline"
39. style="margin-left: 20px; margin-top: 16px"
40. >i>
41. <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
42. div>
43. div>
44. template>

1. // navbar的height：100px
2. .new-breadcrumb {
3. height: 50px;
4. background: rgb(240, 241, 243);
5. display: flex;
6. }
7. .navbar {
8. height: 100px;
9. }

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

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

1. .app-main {
2. /* 100= navbar 100 */
3. min-height: calc(100vh - 100px); // 原来是50px
4. width: 100%;
5. position: relative;
6. overflow: hidden;
7. }

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

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

注释掉默认的首页即可

1. // if (!this.isDashboard(first)) {
2. // matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
3. // }

四、修改全局边距

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

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

1. //main-container全局样式
2. .app-content {
3. border: 20px solid rgb(240, 241, 243);
4. border-top: none;
5. }
7. .app-container {
8. padding: 10px 20px;
9. }

最终页面效果如下：