Vue后台管理页面总体结构及主要功能设计_vue 管理系统的分析界面

后台管理页面总体结构为：顶部左侧为系统标题，顶部右侧为用户图标及改密、退出菜单。中间左侧为功能菜单，中间右侧为操作区域，可以用el-row配合el-col来实现布局。其中导航菜单可以用el-menu配合el-menu-item来实现。用v-if控制一个变量值的变化，来控制在操作区域显示哪个组件。
具体代码如下

<template>
  <div>
    <el-container>
      <el-header>
        <el-row class="bg-dark">
          <el-col :span="12">
            <h2 style="margin: 0.9rem 0.5rem;">标题</h2>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-dropdown style="margin: 0.6rem;">
              <el-button type="primary" plain>
                <span class="fa fa-user-o"></span>　<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-b-modal.modal-2>修改密码</el-dropdown-item> <!--点击后显示修改密码的modal弹窗-->
                <el-dropdown-item @click.native="logout()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px" style="text-align: left;">
          <el-menu default-active="1" class="el-menu-vertical-demo" theme="light" :default-openeds="openeds">
          <!--首页导航，同时为变量curCom赋值-->
            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25