vue后台管理系统布局模板

本是古典何须时尚 2021-07-25 20:55 873阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

## 结构目录： ##

![20210311001413869.png][]

# 一、使用Vuex的方式 #

（推荐。结构更清晰一些）

home.vue:

<template>
      <div class="homeContainer">
        <div class="header">
          <img src="@/assets/logo.png" style="height:70px;width:55px;margin-left:30px;" />
          <span class="collapseChange" @click="collapseChange()">
            <i v-if="!isCollapse" class="el-icon-s-fold"></i>
            <i v-else class="el-icon-s-unfold"></i>
          </span>
          <span class="title">后台管理系统</span>
        </div>
        <div class="bottom">
          <vAside></vAside>
          <div class="view">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </template>
     
    <script>
    import vAside from "./aside.vue";
    import bus from "./bus";
    
    export default {
      components: { vAside },
      data() {
        return {};
      },
      created() {},
      mounted() {},
      computed: {
        isCollapse() {
          return this.$store.state.isCollapse;
        }
      },
      methods: {
        collapseChange() {
          this.$store.commit("handleCollapse", !this.isCollapse);
        }
      }
    };
    </script>
     
    <style lang="scss">
    .homeContainer {
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-flow: column nowrap;
      .header {
        background-color: red;
        height: 85px;
        text-align: left;
        display: flex;
        align-items: center;
        img:hover {
          cursor: pointer;
          filter: brightness(90%);
        }
        .collapseChange {
          display: inline-block;
          margin-left: 10px;
          margin-right: 10px;
          line-height: 50px;
          text-align: center;
          width: 50px;
        }
        .collapseChange:hover {
          cursor: pointer;
          filter: brightness(90%);
        }
        .title {
          line-height: 85px;
          font-size: 50px;
          font-family: "黑体";
          font-weight: bold;
        }
      }
      .bottom {
        flex: auto;
        background-color: gray;
        display: flex;
        height: calc(100vh - 85px);
    
        .view {
          flex: auto;
          background-color: rgb(179, 179, 179);
          height: 100%;
          overflow: auto;
        }
      }
    }
    </style>

## aside.vue: ##

<template>
      <div class="aside">
        <el-menu
          :collapse="collapse"
          default-active="$route.path"
          class="el-menu-vertical-demo menu"
          text-color="#ffd04b"
          active-text-color="red"
          unique-opened
        >
          <el-submenu index="1">
            <template slot="title">
              <img src="@/assets/logo.png" />
              <span>logo</span>
            </template>
            <el-menu-item index="1-1" @click="changeRoute('page1')">
              <span>page1</span>
            </el-menu-item>
            <el-menu-item index="1-2" @click="changeRoute('page2')">
              <span>page2</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <img src="@/assets/logo.png" />
              <span>logo</span>
            </template>
            <el-menu-item index="2-1" @click="changeRoute('page3')">
              <span>page3</span>
            </el-menu-item>
            <el-menu-item index="2-2" @click="changeRoute('page4')">
              <span>page4</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </template>
    <script>
    import bus from "./bus";
    export default {
      data() {
        return {};
      },
      created() {},
      computed: {
        collapse() {
          return this.$store.state.isCollapse;
        }
      },
      methods: {
        //改变路由
        changeRoute(name) {
          this.$router.push({ name: name });
        }
      }
    };
    </script>
     
    <style lang='scss'>
    .aside {
      display: flex;
      flex-flow: column nowrap;
      height: 100%;
      overflow: auto;
    
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 300px;
      }
      .el-menu--collapse {
        width: 110px;
      }
      .el-menu--popup {
        background-color: red;
      }
      .el-menu {
        height: 100%;
        background-color: rgb(241, 42, 16);
        .el-menu-item:hover {
          background-color: rgb(223, 125, 101);
        }
        .el-submenu {
          .el-submenu__title {
            height: 100px;
            display: flex;
            align-items: center;
            img {
              width: 70px;
              height: 70px;
              margin-right: 10px;
            }
          }
          .el-submenu__title:hover {
            background-color: rgb(199, 26, 14);
          }
          .el-menu-item {
            color: rgb(229, 233, 17);
            background-color: rgb(180, 89, 66);
          }
    
          .el-menu-item:hover {
            background-color: rgb(223, 125, 101);
          }
          .el-icon-arrow-down {
            color: white;
          }
        }
      }
    }
    </style>

##  store/index.js: ##

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        isCollapse: false
      },
      mutations: {
        // 侧边栏折叠
        handleCollapse(state, data) {
          state.isCollapse = data;
        }
      },
      actions: {
      },
      modules: {
      }
    })

# 二、使用事件车bus.js的方式 #

## home.vue: ##

<template>
      <div class="homeContainer">
        <div class="header">
          <img src="@/assets/logo.png" style="height:70px;width:55px;margin-left:30px;" />
          <span class="el-icon-menu collapseChange" @click="collapseChange"></span>
          <span class="title">后台管理系统</span>
        </div>
        <div class="bottom">
          <vAside></vAside>
          <div class="view">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import vAside from "./aside.vue";
    import bus from "./bus";
    
    export default {
      components: { vAside },
      data() {
        return {
          isCollapse: false
        };
      },
      created() {},
      mounted() {},
      computed: {},
      methods: {
        // 切换折叠状态
        collapseChange() {
          this.isCollapse = !this.isCollapse;
          bus.$emit("collapse", this.isCollapse);
        }
      }
    };
    </script>
    
    <style lang="scss">
    .homeContainer {
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-flow: column nowrap;
      .header {
        background-color: red;
        height: 85px;
        text-align: left;
        display: flex;
        align-items: center;
        img:hover {
          cursor: pointer;
          filter: brightness(90%);
        }
        .collapseChange {
          display: inline-block;
          margin-left: 10px;
          margin-right: 10px;
          line-height: 50px;
          text-align: center;
          width: 50px;
        }
        .collapseChange:hover {
          cursor: pointer;
          filter: brightness(90%);
        }
        .title {
          line-height: 85px;
          font-size: 50px;
          font-family: "黑体";
          font-weight: bold;
        }
      }
      .bottom {
        flex: auto;
        background-color: gray;
        display: flex;
        height: calc(100vh - 85px);
    
        .view {
          flex: auto;
          background-color: rgb(179, 179, 179);
          height: 100%;
          overflow: auto;
        }
      }
    }
    </style>

## aside.vue: ##

<template>
      <div class="aside">
        <el-menu
          :collapse="isCollapse"
          default-active="$route.path"
          class="el-menu-vertical-demo menu"
          text-color="#ffd04b"
          active-text-color="red"
          unique-opened
        >
          <el-submenu index="1">
            <template slot="title">
              <img src="@/assets/logo.png" />
              <span>logo</span>
            </template>
            <el-menu-item index="1-1" @click="changeRoute('page1')">
              <span>page1</span>
            </el-menu-item>
            <el-menu-item index="1-2" @click="changeRoute('page2')">
              <span>page2</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <img src="@/assets/img/jdjm.png" />
              <span>logo</span>
            </template>
            <el-menu-item index="2-1" @click="changeRoute('page3')">
              <span>page3</span>
            </el-menu-item>
            <el-menu-item index="2-2" @click="changeRoute('page4')">
              <span>page4</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </template>
    <script>
    import bus from "./bus";
    export default {
      data() {
        return {
          isCollapse: false //折叠
        };
      },
      created() {
        bus.$on("collapse", msg => {
          this.isCollapse = msg;
        });
      },
      computed: {},
      methods: {
        //改变路由
        changeRoute(name) {
          this.$router.push({ name: name });
        }
      }
    };
    </script>
    
    <style lang='scss'>
    .aside {
      display: flex;
      flex-flow: column nowrap;
      height: 100%;
      overflow: auto;
    
      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 300px;
      }
      .el-menu--collapse {
        width: 110px;
      }
      .el-menu--popup {
        background-color: red;
      }
      .el-menu {
        height: 100%;
        background-color: rgb(241, 42, 16);
        .el-menu-item:hover {
          background-color: rgb(223, 125, 101);
        }
        .el-submenu {
          .el-submenu__title {
            height: 100px;
            display: flex;
            align-items: center;
            img {
              width: 70px;
              height: 70px;
              margin-right: 10px;
            }
          }
          .el-submenu__title:hover {
            background-color: rgb(199, 26, 14);
          }
          .el-menu-item {
            color: rgb(229, 233, 17);
            background-color: rgb(180, 89, 66);
          }
    
          .el-menu-item:hover {
            background-color: rgb(223, 125, 101);
          }
          .el-icon-arrow-down {
            color: white;
          }
        }
      }
    }
    </style>

## bus.js: ##

import Vue from 'vue';
    // 使用 Event Bus
    const bus = new Vue();
    export default bus;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/d87a6d50e5204a829edc299470211106.png
[20210311001413869.png]: /images/20210725/45b7bcfd2d4b459f93250792d2ac4c69.png