1、整体布局

我这里用的是element-ui组件中的布局容器Container ，链接如下
https://element.eleme.cn/#/zh-CN/component/container](https://element.eleme.cn/#/zh-CN/component/container

image.png

2、侧边导航栏

https://element.eleme.cn/#/zh-CN/component/menu
需求：当点击左侧导航时，右边窗口显示出对应的内容

1、代码编写

<el-menu :default-openeds="['1', '2']"  //默认进入后台时，哪些导航是全部展开
               :default-active="this.$route.path" // 这里是指当前路由，这样在路由变化的时候，对应的el-menu才会高亮。
               :router="true"  // 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
               background-color="rgba(52, 64, 88)" 
               text-color="white">  //导航栏字体颜色

        <!--左侧项目-->
        <el-submenu index="1" >
          <template slot="title"><i class="el-icon-message"></i>项目</template>
          <el-menu-item-group>
//index：类型为字符串，在每一个el-menu-item组件上都有一个编号，给default-active标记
            <el-menu-item index="/home/unfinish">进行中</el-menu-item>
            <el-menu-item index="/home/finish">已完成</el-menu-item>
            <el-menu-item index="/home/create">创建项目</el-menu-item>
            <el-menu-item index="/home/search">搜索</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
</el-menu>

2、路由编写
在 router/index.js 文件中编写路由，这里有父子路由之分，跳转到后台的 home 就是父路由，点击导航菜单渲染出来的页面文件是子路由。

import home from '@/views/backstage/home'  
import finish from '@/views/backstage/project/finish'
import unfinish from '@/views/backstage/project/unfinish'

      path: '/home',  // 后台首页home 
      name: 'home',
      component: home,    // 父路由
      children: [
        {
          path: '/home/unfinish',  // 项目 进行中
          name: 'unfinish',
          component: unfinish    // 子路由
        },
        {
          path: '/home/finish',  // 项目 已完成
          name: 'finish',
          component: finish   // 子路由
        }

image.png

注意：在每个子路由的跳转路径前，千万千万要加上父路由home在前面，否则将无法识别出正确的路径。

3、右侧主内容显示窗口

就是路由跳转到的页面展示位置
后台管理系统的整体布局内容是固定的，变化的只是当你点导航菜单时，渲染出相对应的内容而已，那么渲染出的内容在哪里展示？？
是由router-view决定的，如下，这个写在哪里，跳转出来的页面在哪里展示，见上面布局显示

  <el-main>
        <router-view></router-view>  // 很重要，千万不要忘记
   </el-main>

导航菜单上的每一个加载渲染出来的页面都需要单独建一个文件，如果你不单独分开页面写，当导航的内容特别多时，你怎么办？一个.vue文件要承受所有的渲染页面内容，这将非常不利于你后期的修改及维护，并且容易出错。

image.png

4、浏览器宽度变化时

1、布局错位
我在整体缩放渲染效果时，发现内容并不能随着浏览器缩放（浏览器宽度变化）的大小而变化，而是发生了错位和偏移，这时我们只需要在整体布局的最外层绑定一个class，然后设置一个 min-width 就可以解决这个问题了。

但是在设置了 min-width 后，顶部有两个功能按钮还是会发生错位，这两个按钮我最开始是采用padding/margin都不能解决问题，因为padding/margin设置后，他们的右边始终有你设的多少像素。这时你给发生错位的这两个div的外层再包一层div，然后设置浮动left / right，就解决了。

image.png

       <div style="display: inline-block;float: right"> 
              <div class="class3"  >
                 <el-badge is-dot class="item"><i class="el-icon-bell"></i></el-badge>
              </div>
              <div class="class4" >
                  <el-dropdown style="align-items: center">
                     <span class="el-dropdown-link" style="color: white;">万象<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>基本资料</el-dropdown-item>
                      <el-dropdown-item>修改密码</el-dropdown-item>
                      <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
              </div>
         </div>


  css
 .class3{
    float: left;
  }
  .class4{
    float: right;
    margin-right: 30px;
  }

<template>
    <el-container class="wrap">
      <...>
   </el-container>
</template>


css
 .wrap{
    min-width: 1280px;
 }

image.png

2、element-ui组件样式突然变大
见下面的铃铛icon

image.png

原因是浏览器宽度变化时，element-ui的font-size突然变大，这个不是每个组件都会这样，只有一些才会这样，那么我们怎么解决呢？
我们只需要给其固定的大小就不会发生这种情况了

//icon
<i class="el-icon-arrow-down el-icon--right"></i>
//icon css
.el-icon-arrow-down {
    font-size: 12px;
  }

image.png

5. vue element-ui 后台布局

5. vue element-ui 后台布局

1、整体布局

2、侧边导航栏

3、右侧主内容显示窗口

4、浏览器宽度变化时