这期开始主页面的编写，在src\views目录下创建主页面Home.vue，主要是管理系统页面布局，头部和左侧导航栏。
一、Home.vue 页面
1.1 Home.vue 页面html部分：
<template><el-container class="home-wrap"><!-- header start --><el-header class="flex"><div class="logo flex-item"><i class="el-icon-date"></i> 工作周报</div><div class="user-info"><el-dropdown @command="handleCommand"><el-button type="primary"><i class="el-icon-user-solid el-icon--left"></i>{{userInfo.name}}</el-button><el-dropdown-menu slot="dropdown"><el-dropdown-item command="loginOut">退出</el-dropdown-item></el-dropdown-menu></el-dropdown></div></el-header><!-- header end --><div class="container-wrap"><!-- aside-nav start --><div class="aside-wrap"><el-menu:default-active="activePath"background-color="#283643"text-color="#fff"active-text-color="#1CC09F"router><el-menu-item v-for="item in menuList" :key="item.url" :index="item.url"@click="handleSelect(item.url)"><i :class="item.icon"></i><span slot="title">{{item.name}}</span></el-menu-item></el-menu></div><!-- aside-nav end --><!-- main start --><div class="main-wrap"><router-view/></div><!-- main end --></div></el-container></template>
1.2 Home.vue 页面js部分：
<script>import { userLogout } from '@/config/interface'export default {data () {return {menuList: this.$store.state.menuList,activePath: null,reqFlag: {logout: true}}},components: {},computed: {userInfo: function () {let userInfo = this.$store.state.userInforeturn userInfo}},watch: {'$route': function (to, from) {this.activePath = to.meta.pagePath}},created () {this.activePath = this.$route.meta.pagePath},methods: {handleCommand (command) {if (command == 'loginOut') {this.loginOut()}},// 登出loginOut () {const url = userLogoutif (this.reqFlag.logout) {this.reqFlag.logout = falselet params = {}this.$http(url, params).then(res => {if (res.code == 1) {localStorage.clear()this.$store.dispatch('saveUserInfo', {})this.$common.toast('登出成功', 'success', false)this.$router.replace({ path: '/' })}this.reqFlag.logout = true})}},// 解决element导航中，当前导航路由标识和当前路由一致时，点击当前导航，页面不刷新问题handleSelect (indexPath) {if (indexPath == this.$route.path) {this.$common.shallowRefresh(this.$route.name)}}}}</script>
1.3 Home.vue 页面展示：
二、项目链接
周报管理系统git仓库链接：nodeJs工作周报后台管理系统OA模板
程序员接单_竹立荷塘的博客-CSDN博客
