Vue项目搭建修改若依框架的侧边栏导航栏面包屑样式修改全局页面样式
Posted 小白Rachel
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
（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
// variable.scss
// 默认菜单主题风格
$base-menu-color: #333333; // 菜单全部字体颜色
$base-menu-color-active: #e60012; // 父级菜单激活的字体颜色
$base-menu-background: #fff; // 菜单栏背景颜色（非激活状态）
$base-logo-title-color: #e60012; // 系统标题颜色
$base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background: #e60012; // 选中菜单的字体颜色
$base-logo-light-title-color: #fff; // 对应base-logo-title-color
$base-sub-menu-background: #f5f7fa; // 选中的菜单的子菜单背景颜色
$base-sub-menu-hover: #f7f0f1; // 子菜单hover背景颜色如果还想要修改 激活的菜单的样式需要在sidebar.scss中添加和修改如下代码：
// sidebar.scss
.el-menu-item.is-active
color: #e60012 !important;
background-color: $base-sub-menu-hover !important; // 点击菜单的颜色
&:hover
background-color: $base-sub-menu-hover !important;
// menu hover
.submenu-title-noDropdown, .el-submenu__title
&:hover
background-color: $base-sub-menu-hover !important;
& .theme-dark .nest-menu .el-submenu > .el-submenu__title,
& .theme-dark .el-submenu .el-menu-item
// background-color: $base-sub-menu-background !important;
color: #333333 !important;
background-color: #fff;
&:hover
background-color: $base-sub-menu-hover !important;
修改之后的效果如下：
二、修改顶部导航栏Navbar
1. 删除部分工具栏
src-->layout-->component-->Navbar.vue
<!-- <template v-if="device!=='mobile'">
<search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip>
<el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip>
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template> -->2. 修改默认头像
（tips：全局搜索profile.jpg）
src-->store-->modules-->user.js
替换profile.jpg图片即可
三、修改面包屑hamburger
1. 修改收起展开图标和标题
src-->layout-->component-->Navbar.vue
注释掉面包屑部分，我们一会自己写
src-->component-->Hamburger--> index.vue
// humburger index.vue
<template>
<div style="padding: 0 15px; display: flex">
<img
src="../../assets/logo/svg.png"
@click="toggleClick"
:class=" 'is-active': isActive "
class="hamburger"
/>
<div class="nabar-title">综合管理系统</div>
</div>
</template><style scoped>
.hamburger
display: inline-block;
vertical-align: middle;
margin-top: 18px;
width: 16px;
color: #e60012;
height: 16px;
margin-left: 6px;
.hamburger.is-active
transform: rotate(180deg);
.nabar-title
margin-left: 18px;
height: 100%;
width: 200px;
line-height: 54px;
color: #e60012;
font-weight: 600;
vertical-align: middle;
</style>2. 不显示tagsview
在全局settings文件中，若以框架已经定义了是否显示tagsView,设置属性为false即可。
/**
* 是否显示 tagsView
*/
tagsView: true,
3. 添加自定义面包屑
src-->layout-->component-->Navbar.vue
需要修改Navbar的高度，并添加面包屑
// Navbar.vue
<template>
<div class="navbar">
<div style="height: 50px; background: #fff">
<hamburger
id="hamburger-container"
:is-active="sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<!-- <breadcrumb
id="breadcrumb-container"
class="breadcrumb-container"
v-if="!topNav"
/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" /> -->
<div class="right-menu">
<el-dropdown
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<!-- <el-dropdown-item @click.native="setting = true">
<span>布局设置</span>
</el-dropdown-item> -->
<el-dropdown-item divided @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<!-- 自定义面包屑 -->
<div class="new-breadcrumb">
<i
class="el-icon-location-outline"
style="margin-left: 20px; margin-top: 16px"
></i>
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
</div>
</div>
</template>// navbar的height：100px
.new-breadcrumb
height: 50px;
background: rgb(240, 241, 243);
display: flex;
由于修改了navbar的高从50px--->100px,会影响页面整个的高度。（整个页面的高度是100vh，下面内容app-main的高度就是100vh-navbar的高度）因此需要修改app-main高度
src--> layout-->components-->AppMain.vue
.app-main
/* 100= navbar 100 */
min-height: calc(100vh - 100px); // 原来是50px
width: 100%;
position: relative;
overflow: hidden;
但是希望去掉首页/，因为不是所有页面都是通过首页进入的。
src-->components-->Breadcrumb-->index.vue
注释掉默认的首页即可
// if (!this.isDashboard(first))
// matched = [ path: '/index', meta: title: '首页' ].concat(matched)
//
四、修改全局边距
可以看到 ，所有页面都包含在app-container下的，如果需要修改样式则需呀修改全局的app-container样式。
src-->assets-->styles-->index.scss
//main-container全局样式
.app-content
border: 20px solid rgb(240, 241, 243);
border-top: none;
.app-container
padding: 10px 20px;
最终页面效果如下：
使用bootstrap3.0搭建一个具有自定义风格的侧边导航栏
由于工作变动，新的项目组，可能会涉及到更多的类似于后台管理系统这一类的项目，而且开发可能更加偏向于传统型的开发，希望今后能够在新的项目中能够用得上vuejs吧！
接手项目的时候，就是一个后台管理系统，而且采用了Bootstrap进行搭建，页面大致模型也基本搭建成功了。然后看到页面上有一个侧边栏，之前是他们从别的地方找出来的一个侧边栏，给人的感觉总是差那么点意思。所以重构了一下。具体的效果，请移步bootstrap-sidebar 。
其实主要就解决了两个问题：
1、与内容等高，最小高度为一屏的高度。
之前是设置了一个最小高度，min-height: 1200px; 问题在于当页面内容很少的时候，不足一屏，此时也会出现滚动条。
html {
min-height: 100%;
position: relative;
}
关键点在于给html标签设置一个position:relative; 然后左侧导航栏进行相对定位的时候，才能相对到html标签，而不能让其默认相对body标签，经过验证，即使给body标签设置同样的样式的时候，在不满一屏和超过一屏当中切换的时候，无法达到我们预想的效果，而设置html标签的属性，则能完美达成。
2、自定义部分导航样式
这块其实就是写css咯，每一个前端应该都是从这里入门的吧！
我使用了scss预编译，本身Bootstrap官方也提供了sass版本的。所以继续写就好了。也没什么好说的！
@import "./bootstrap/variables";
$brand-muted: $gray-light !default;
$scences: ( "primary": $brand-primary, "success": $brand-success, "info": $brand-info, "danger": $brand-danger, "muted": $brand-muted, "warning": $brand-warning);
// 导航栏的辅助色调是否以自己设置的色值来显示，还是使用primary、 success等色值
// 自定制的话$isCustomNavBgColor为true，$navBgColor传入自定制的色值
$isCustomNavBgColor: false;
$navBgColor: orange;
html {
min-height: 100%;
position: relative;
}
.wrap {
padding-left: 20%;
}
@media screen and (min-width: 1500px) {
.wrap {
padding-left: 300px;
}
}
@media screen and (max-width: 1200px) {
.wrap {
padding-left: 240px;
}
}
/**
* 背景色的设置
* params： $color 初始化默认颜色 $lignten 提升亮度百分比
*/
@mixin changeBgColor($color: rgb(34, 40, 55), $lignten: 0) {
@if $lignten && $lignten !=0 {
background-color: lighten($color, $lignten);
}
@else {
background-color: $color;
}
}
@each $scence,
$theme in $scences {
$color: map-get($scences, $scence);
@if $isCustomNavBgColor==true {
$color: $navBgColor;
}
.nav-#{$scence} {
li {
a {
color: lighten($color, 45%);
padding: $panel-body-padding;
&:hover {
color: lighten($color, 45%);
background-color: darken($color, 15%);
}
&:focus {
@include changeBgColor($lignten: 10%);
}
}
&.active {
a {
color: $color;
&:hover {
color: lighten($color, 45%);
}
}
}
&.active:after {
background-color: $color;
}
}
}
}
.nav-aside {
@include changeBgColor();
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 20%;
min-width: 240px;
max-width: 300px;
li {
position: relative;
a {
@include changeBgColor($lignten: 10%);
}
&.active:after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 4px;
}
}
}
.nav {
#{&} {
margin-top: 2px;
li a {
text-indent: 1em;
}
}
}
以上是关于Vue项目搭建修改若依框架的侧边栏导航栏面包屑样式修改全局页面样式的主要内容，如果未能解决你的问题，请参考以下文章