• 整体效果展示：

1、头部

• 分析

  • 结构分左右
  • 左
    • logo
    • 网站主题
  • 右：展示头像和用户名的下拉菜单
  • 垂直居中
  • 设置背景

• 提示：

  • 下拉菜单实现参考博文‘element-ui_dropdown-下拉菜单’
  • 其他部分在整体代码

2、主体-左侧导航栏

• 分析
  • 带有路由功能的导航菜单
  • 导航菜单部分参考博文’element-ui_NavMenu-典型导航菜单’

3、主体-右侧内容

• 分析：
  • 右侧就是一个<router-view>路由占位符，用于显示导航组件

4、底部

此处简单展示版权信息。

5、整体.vue代码

<!--  -->
<template>
  <el-container class="home-container">
	<el-header>
	  <div class="header-left">
		<img src="../assets/logo.png" alt />
		<span>后台管理系统</span>
	  </div>
	  <el-dropdown @command="handleCommand">
		<div class="header-right">
		  <el-avatar>
			<img src="../assets/avatar.jpg" alt />
		  </el-avatar>
		  <span>gaogzhen</span>
		</div>
		<el-dropdown-menu slot="dropdown">
		  <el-dropdown-item icon="el-icon-edit" command="a">修改密码</el-dropdown-item>
		  <el-dropdown-item icon="el-icon-s-fold" command="b">退出系统</el-dropdown-item>
		</el-dropdown-menu>
	  </el-dropdown>
	</el-header>
	<el-container>
	  <el-aside :width="isCollapse? '64px': '200px'">
		<div class="btn-toggle" @click="toggleCollapse">|||</div>
		<el-menu
		  background-color="#333744"
		  text-color="#fff"
		  default-active="/report"
		  active-text-color="#ffd04b"
		  unique-opened 
		  :collapse="isCollapse"
		  :collapse-transition="false"
		  router 
		>
		  <el-submenu index="/index">
			<template slot="title">
			  <i class="el-icon-s-home"></i>
			  <span>首页</span>
			</template>
			 <el-menu-item index="/report">
			  <template slot="title">
				<i class="el-icon-menu"></i>
				<span>报表</span>
			  </template>
			</el-menu-item>
		  </el-submenu>
		  <el-submenu index="2">
			<template slot="title">
			  <i class="el-icon-s-grid"></i>
			  <span>商品管理</span>
			</template>
			<el-menu-item index="/category">
			  <template slot="title">
				<i class="el-icon-menu"></i>
				<span>分类管理</span>
			  </template>
			</el-menu-item>
			<el-menu-item index="/brand">
			  <template slot="title">
				<i class="el-icon-menu"></i>
				<span>品牌管理</span>
			  </template>
			</el-menu-item>
			<el-menu-item index="/goodsList">
			  <template slot="title">
				<i class="el-icon-menu"></i>
				<span>商品列表</span>
			  </template>
			</el-menu-item>
			<el-menu-item index="/specification">
			  <template slot="title">
				<i class="el-icon-menu"></i>
				<span>规格参数</span>
			  </template>
			</el-menu-item>
		  </el-submenu>
		  <el-submenu index="/user">
			<template slot="title">
			  <i class="el-icon-user-solid"></i>
			  <span>会员管理</span>
			</template>
			<el-menu-item index="/userList">
			  <template slot="title">
				<i class="el-icon-menu"></i>
				<span>会员管理</span>
			  </template>
			</el-menu-item>
		  </el-submenu>
		  <el-submenu index="/sale">
			<template slot="title">
			  <i class="el-icon-money"></i>
			  <span>销售管理</span>
			</template>
			<el-menu-item index="/order">
			  <template slot="title">
				<i class="el-icon-menu"></i>
				<span>订单管理</span>
			  </template>
			</el-menu-item>
		  </el-submenu>
		  <el-submenu index="/authority">
			<template slot="title">
			  <i class="el-icon-s-tools"></i>
			  <span>权限管理</span>
			</template>
			<el-menu-item index="/role">
			  <template slot="title">
				<i class="el-icon-menu"></i>
				<span>角色管理</span>
			  </template>
			</el-menu-item>
		  </el-submenu>
		</el-menu>
	  </el-aside>
	  <el-main><router-view></router-view></el-main>
	</el-container>
	<el-footer>
	  <span class="lh">©2020&nbsp;etoak&nbsp;</span>
	  <span class="lh">(鲁)-测试-2017-0020</span>
	  <a href="javascript:;">
		<span class="lh">鲁公网安备11000002000001号</span>
	  </a>
	  <span class="lh">京ICP证030173号</span>
	</el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
	return {
	  isCollapse: false,
	};
  },

  created() {},

  methods: {
	handleCommand() {},
	toggleCollapse() {
	  this.isCollapse = !this.isCollapse
	},
  },
};
</script>

<style lang='scss' scoped>
.home-container {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  .header-left {
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 20px;
	img {
	  height: 50px;
	  margin-right: 10px;
	}
  }
  .header-right {
	display: flex;
	justify-items: center;
	color: #fff;
	span {
	  line-height: 40px;
	  margin-left: 5px;
	}
  }
}
.el-aside {
  background: #333744;
  .el-menu {
	border-right: none;
  }
  .btn-toggle {
	background-color: #4a5064;
	line-height: 24px;
	font-size: 10px;
	color: #fff;
	text-align: center;
	letter-spacing: 0.2em;
	cursor: pointer;
  }
}
.el-main {
  background-color: #eaedf1;
}

.el-footer {
  background-color: #373d41;
  line-height: 60px;
  text-align: center;
  span {
	margin: 0 5px;
  }
}
</style>

提示 ：如果侧边导航栏有边框问题，记得设置el-menu的border-right:none

后记 ：

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/ly-bms    // 前端后台管理系统
后端JAVA源代码地址:https://gitee.com/gaogzhen/ly-backend        // 后端项目