vue通用后台管理系统（二）

要实现的页面 

二、整体ui的搭建

1. Container布局容器

使用element-ui中的Container布局容器进行整体ui的搭建：在element-ui中选取一个组件样式然后引入到main.vue组件中

（1）全局引入element-ui

 （2）在main.vue中使用想要引入的Container布局容器代码

 （3）基本页面布局的效果

 Aside:菜单区（导航区），Header：标题区，Home:内容区

1.1 菜单区的实现

（1）左侧菜单栏的引入

利用element-ui中的组件库实现左侧菜单栏的引入：

 注意：组件拆分：具有单一功能的页面将其拆分为单独的组件，这样可以方便后面代码的维护

所以，我们需要在components文件夹中新建CommonAside.vue组件，然后将在element-ui中选取的NavMenu导航菜单的代码部分复制进去，并进行格式的调整。

// src/components/CommonAside.vue

<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">导航一</span>
        </template>
        <el-menu-item-group>
          <span slot="title">分组一</span>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <span slot="title">选项4</span>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
</template>

<script>
    export default {
        data() {
            return {
                isCollapse: true
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>

然后，在Main.vue组件中引入并使用CommonAside组件

 最后呈现的结果如下：

（2）一级菜单的实现

左侧菜单分为两种：一种是有子菜单，另一种是没有子菜单----菜单层级

点击菜单栏的时候要进行高亮显示、菜单栏默认展开----要实现的功能

① 将菜单栏设置为默认展开

关于如何实现展开和折叠：查看element-ui官方文档（掌握在官方文档中查看引入组件标签中的属性Attribute）

 

 

 ② 修改导航栏的位置：将导航一和导航二进行交换，然后删除导航三和导航四部分

同时需要根据要实现的样式去修改引入的CommonAside.vue的样式，修改后的样式如下：

 ③渲染页面内容-数据分组

判断有没有子菜单，是根据有没有children来判断的

计算属性：数据不能写死，因为对于不同账号设置的权限可能不一样，需要调用数据接口去使用数据。所以数据是动态的，在数据发生变化时，需要根据依赖（依赖当前menuData的变化）去修改数据，此时需要使用计算属性

计算属性需要实现的功能：对数据进行过滤分组：一组是没有子菜单，一组是有子菜单

key：标识当前标签元素的唯一性

 

 最后呈现的效果如下：

 （3）二级菜单的实现

二级菜单和一级菜单一样：显示内容也是包含图标和数据内容----依旧使用element-ui组件

二级菜单与一级菜单的区别：二级菜单比一级菜单多了一个子菜单需要渲染

所以分别实现两级菜单的数据动态渲染即可，操作步骤同上

（4）菜单样式与less引入

① 调整风格：修改左侧菜单栏的字体和背景样式等-----element-ui

 ② 修改左侧菜单栏的高度：使其铺满整个页面

 ③ 引入less

下载less：npm i less@4.1.2      npm i less-loader@6.0.0  -----注意版本

引入less，并进行代码改写：（scoped:让样式只作用于当前部分）

 设置h3（通用后台系统的相关样式、字体大小，左右边距等）

// 文字居中
text-align: center;
line-height: 48px;
font-size:16px;
font-weight: 400;

 （5）菜单点击跳转功能实现

先配置相关路由组件，然后再在src/routes/index.js中引入路由

路由跳转：根据数据判断当前需要跳转的位置，所以需要传参--传入当前收到的数据Item

绑定点击事件：

 

重定向：当前跳转的路由的路径是"/"时，使其跳转到Home路由组件中：src/rputes/index.js

 1.2 Header组件的实现

（1）header组件搭建与样式调整

问题：重复点击同一个路由进行跳转时会报错

解决方法：在进行路由跳转时进行判断：如果是跳转到当前路由则不跳转，如果不是则跳转

//编程式导航
//当页面的路由与跳转的路由不一致时才允许跳转
if (this.$route.path != item.path && !(this.$route.path === '/home' && (item.path === '/'))) {
    this.$router.push(item.path)
}  

header组件搭建：①在components文件夹中创建CommonHeader.vue组件，并写一些基本样式

 ② 在Main.vue组件中引入header组件

 ③ 使用element-ui相关组件进行header组件的样式调整

 //引入按钮、图标并进行size的属性设置
<el-button icon="el-icon-menu" size="mini"></el-button>

//设置按钮边距
padding: 0 20px;
//使按钮垂直居中：flex布局
display: flex;
justify-content: space-between;
align-items: center;  //垂直居中

//左侧
<div class="l-content">
     <el-button icon="el-icon-menu" size="mini"></el-button>
     <!-- 面包屑 -->
     <span class="text">首页</span>
</div>

.header-container {
    padding: 0 20px;
    background-color: #333;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;  //垂直居中
}
.text {
    color:#fff;
    font-size: 14px;
    margin-left: 10px;
}

//右侧
<div class="r-content">
   <el-dropdown>
      <span class="el-dropdown-link">
          <img  class="user" src="../assets/images/user.png" alt="">
      </span>
      <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>退出</el-dropdown-item>
      </el-dropdown-menu>
   </el-dropdown>
</div>
.r-content {
    .user {
        width: 40px;
        height: 40px;
        border-radius: 50%;  //圆角
    }
}

 1.3 vuex实现左侧折叠

状态修改牵扯到两个组件的变化：组件通信---vuex（需要复习）

安装vuex：npm i vuex@3.6.2 ---注意版本

①创建store并将其挂载到vue上--模块化

 

②使用store：在header组件中加入点击事件，当点击button按钮时去触发state的修改，此时就需要调用mutations中的collapseMenu方法，然后进行state的状态修改

然后state的状态发生变化后，需要在aside组件获取变化后的state并使用

 左侧折叠遗留问题：折叠之后的名称需要改变，同时header组件需要占满整个一行

 第一个问题解决：

<h3>{{ isCollapse ? '后台':'通用后台管理系统' }}</h3>

第二个问题解决：

 最终呈现效果：