布局容器

通过Element的Container布局容器进行初始布局。
项目需要的布局风格为示例中倒数第二个，所以我们要拷贝下来对应的结构

该项目所需要的结构

<!-- layout/index.vue -->
<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <!-- 头部 -->
      <el-header>Header</el-header>
      <!-- 主体 -->
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

Element组件具有与组件名相同的类名，所以可以用来设置样式

• 容器高度通过vh来设置，1vh=1%的视口高度；设置最小宽度防止窗口尺寸变化导致内容堆叠
• 内部区域根据Element颜色设置或者自行选择

<!-- layout/index.vue -->
<style lang="scss" scoped>
  .el-container {
    height: 100vh;
    min-width: 980px;
  }
  .el-aside {
    background-color: #d3dce6;
  }
  .el-header {
    background-color: #b3c0d1;
  }
  .el-main {
    background-color: #e9eef3;
  }
</style>

侧边栏菜单

通过Element的NavMenu创建侧边栏
找到NavMenu的侧栏中自定义颜色示例的结构

<template>
  <div class="app-aside">
    <!-- default-active属性是默认激活第几项，第一项因为是可以下拉的，不会被选中所以不会变色 -->
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
    <!-- el-submenu，表示有子菜单的标签 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <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">
          <template slot="title">选项4</template>
          <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>
      <!-- 附带disabled属性表示不可选 -->
      <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>
  </div>
</template>

<script>
export default {
  name: 'AppAside'
}
</script>

<style lang = "scss" scoped>
.app-aside {
    height: 100%;
    .el-menu {
        height: 100%;
        border-right: 0 none;
    }
}
</style>

这些标签各自都是什么含义，从文档中都是可以看到的

例图

将layout中的侧边栏设置为AppAside组件，保存在layout/components/中
随后将之前的侧边栏菜单组件代码放入
初始结构中<el-menu>设置了open和close事件，不需要的话可以删除掉

@open = "handleOpen"
@close = "handleClose"

在layout中引入AppAside组件

根据我们自身的项目所需修改结构，调整功能

• <el-menu-item>代表的是没有子项的菜单
• <el-submenu>代表的则是有子项的菜单
• 操作的时候如果为了优化美观之类的设置两个<submenu>不能同时展开，设置方式是给<el-menu>添加unique-opened属性，可以查阅Element文档得知
• 还有一点：当我们点击列表项的时候，应该进行路由操作，我们可以使用文档的NavMenu的router功能
  • 使用的方法：给<el-menu>设置router属性，就可以使用vue-router模式了
  • 该模式激活之后以index属性作为path进行路由跳转
    全部设置完毕啦，最终代码为：

// /layout/components/AppAside.vue
<template>
  <div class="app-aside">
    <!-- 导航菜单组件 -->
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened
      router
      >
      <!-- 具有子菜单的选项 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>权限管理</span>
        </template>
          <el-menu-item index="/role">
          <i class="el-icon-document"></i>
            <span>角色列表</span>
          </el-menu-item>
          <el-menu-item index="/menu">
          <i class="el-icon-document"></i>
            <span>菜单列表</span>
          </el-menu-item>
          <el-menu-item index="/resource">
          <i class="el-icon-document"></i>
            <span>资源列表</span>
          </el-menu-item>
      </el-submenu>
      <!-- 没有子菜单的选项 -->
      <el-menu-item index="/course">
        <i class="el-icon-menu"></i>
        <span slot="title">课程管理</span>
      </el-menu-item>
      <el-menu-item index="/user">
        <i class="el-icon-document"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span slot="title">广告管理</span>
        </template>
        <el-menu-item index="/advert">
          <i class="el-icon-document"></i>
          <span>广告列表</span>
        </el-menu-item>
        <el-menu-item index="/advert-space">
          <i class="el-icon-document"></i>
          <span>广告位列表</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'AppAside'
}
</script>

<style lang="scss" scoped>
.app-aside {
  height: 100%;
  .el-menu {
    height: 100%;
    border-right: 0 none;
  }
}
</style>

路由切换设置成功了，那么接下来就是在layout组件中设置子路由的出口就可以完成了

<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <!-- 侧边栏组件 -->
      <app-aside></app-aside>
    </el-aside>
    <el-container>
      <!-- 头部 -->
      <el-header>Header</el-header>
      <!-- 主体 -->
      <el-main>
        <!-- 子路由的出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

头部

头部分为左侧导航和右侧用户菜单

如图所示

首先，将头部封装成AppHeader组件，保存到layout/components/中

<template>
  <div class="app-header"></div>
</template>

<script>
export default {
  name: 'AppHeader'
}
</script>

<style lang="sass" scoped>

</style>

在layout中引入AppHeader组件

`<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <!-- 侧边栏组件 -->
      <app-aside></app-aside>
    </el-aside>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <!-- 头部组件 -->
        <app-header></app-header>
      </el-header>
      <!-- 主体 -->
      <el-main>
        <!-- 子路由的出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 引入侧边栏组件
import AppAside from './components/AppAside'
import AppHeader from './components/AppHeader'

export default {
  name: 'Layout',
  components: {
    AppAside,
    AppHeader
  }
}
</script>

头部-左侧

左侧使用Element面包屑导航

<!-- AppHeader.vue -->
<template>
  <div class="app-header">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

修改背景色（目的是防止箭头颜色和背景颜色混淆）

// layout/index.vue
.el-header {
  background-color : #fff;
}

设置头部内容垂直居中

//AppHeader.vue
<style lang="scss" scoped>
.app-header {
  height: 100%;
  display: flex;
  align-items: center; //设置垂直居中
}
</style>

头部-右侧

使用Element的下拉菜单来设置

<!-- 右侧下拉菜单 -->
    <el-dropdown>
      <span class="el-dropdown-link">
        下拉菜单<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-item disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

设置左右显示

justify-content: space-between;

将下拉菜单文字更改为Element的Avatar组件

 <!-- 用户头像，使用了Avatar组件 -->
        <el-avatar
        :size="30"
        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
        </el-avatar>

设置头像与侧箭头垂直居中

.el-dropdown-link {
      display: flex;
      align-items: center;
  }

最后，修改下拉菜单的内容与结构，divided用于设置分割线

<el-dropdown-menu slot="dropdown">
        <el-dropdown-item>用户信息</el-dropdown-item>
        <el-dropdown-item divided>登出</el-dropdown-item>
      </el-dropdown-menu>
</el-dropdown>