2021搭建企业级后台（Vue + TS + Element Plus ）～ 8. 页面基础布局

页面效果

整体布局

Container 布局容器

编辑 src/Layout/index.vue 文件：

<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <app-aside />
    </el-aside>

    <!-- 版心 -->
    <el-container>

      <!-- 头部 -->
      <el-header>
        <app-header />
      </el-header>

      <!-- 内容区域 -->
      <el-main>
        <!-- 子路由出口 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import Vue from 'vue'
import AppAside from './components/app-aside.vue'
import AppHeader from './components/app-header.vue'

export default Vue.extend({
  name: 'LayoutIndex',
  components: {
    AppAside,
    AppHeader
  }
})
</script>

<style lang="scss" scoped>
  .el-container {
    min-width: 980px;
    min-height: 100vh;
  }

  .el-header {
    background-color: #B3C0D1;
  }

  .el-aside {
    background-color: #545c64;
  }

  .el-main {
    background-color: #E9EEF3;
  }

</style>

侧边栏

涉及组件：

NavMenu 导航菜单

新建 src/Layout/components/app-aside.vue 文件：

<template>
  <el-menu
    default-active='role'
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <el-submenu index="role">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>权限管理</span>
      </template>
      <el-menu-item index="role">
        <i class="el-icon-location"></i>
        角色管理
        </el-menu-item>
      <el-menu-item index="menu">
        <i class="el-icon-location"></i>
        菜单管理
        </el-menu-item>
      <el-menu-item index="resource">
        <i class="el-icon-location"></i>
        资源管理
      </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-setting"></i>
      <span slot="title">用户管理</span>
    </el-menu-item>
    <el-submenu index="advert">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>广告管理</span>
      </template>
      <el-menu-item index="advert">
        <i class="el-icon-location"></i>
        广告列表
      </el-menu-item>
      <el-menu-item index="advert-space">
        <i class="el-icon-location"></i>
        广告位管理
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AppAsideIndex'
})
</script>

<style lang="scss" scoped>
.el-container {
  .el-aside {
    width: 200px;
    min-height: 100vh;

    .el-submenu {
      width: 200px;
    }

    .el-menu-item {
      width: 200px;
    }
  }
}

</style>

头部

涉及组件：

Dropdown 下拉菜单
Avatar 头像（Element Plus）

新建 src/Layout/components/app-header.vue 文件：

<template>
<div class="app-header">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>活动管理</el-breadcrumb-item>
    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
  </el-breadcrumb>
  <el-dropdown>
  <span class="el-dropdown-link">
    <!-- 头像 -->
    <el-avatar
      shape="square"
      :size="40"
      src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png">
    </el-avatar>
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <!-- 下拉菜单 -->
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>用户 ID</el-dropdown-item>
    <el-dropdown-item divided>退出</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
</div>

</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AppHeaderIndex'
})
</script>

<style lang="scss" scoped>
.app-header {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

    // 头像
    .el-dropdown-link {
      display: flex;
      align-items: center;
    }
}
</style>

效果展示