Vue+ElementUI实现后台管理系统模板--前端篇（四）：定义
主页⾯
⼀、定义主页⾯
主页⾯ 可以拆分成多个组件，每个组件负责⼀部分页⾯的显⽰。
  拆分成 Header、Aside、Footer、Content 四个页⾯。
其中：
  Header          ⽤于定义导航栏信息
  Aside            ⽤于定义菜单栏信息
Footer            ⽤于定义底部信息
  Content        ⽤于显⽰各个菜单选项的页⾯
1》config配置路径
（1）简介
（2）安装
npm install path -S
（3）配置
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
devServer: {
port: 4000
},
configureWebpack: {
resolve: {
alias: {
'~': resolve('./'),
'@': resolve('src'),
"assets": "@/assets",
}
}
}
}
（4）重启服务2》home.vue
（1）简介
结构页
（2）页⾯
<template>
<el-container class="container" v-loading="false" element-loading-text="拼命加载中" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-spinner="    <!-- 侧边栏 -->
<Aside :foldAside="foldAside" />
<!--
direction="vertical"  ⽤于垂直布局
-->
<el-container direction="vertical">
<!-- 头部导航栏 -->
<el-header height="50"> <Header /></el-header>
<!-- 内容 -->
<el-container class="wrapper">
<Content />
</el-container>
<!-- 底部 -->
<div class="footer">
<Footer />
</div>
</el-container>
</el-container>
</template>
<script>
import Header from '@/components/common/header.vue';
import Aside from '@/components/common/aside.vue';
import Footer from '@/components/common/footer.vue';
import Content from '@/components/common/content.vue';
export default {
name: 'Home',
components: {
Header,前端页面模板
Aside,
Footer,
Content,
},
data() {
return {
foldAside: true,
};
},
methods: {
foldOrOpen(data) {
this.foldAside = data;
},
},
};
</script>
<style>
.container {
height: 100%;
}
.wrapper {
height: calc(100vh - 100px);
}
.wrapper_con {
padding-bottom: 0;
}
</style>
3》header.vue
（1）简介
  通过导航栏，可以进⾏⼀些操作。⽐如：折叠侧边栏、修改密码、退出登录等。
（2）页⾯代码（路径地址：/src/components/common/header.vue）
<template>
<div class="header">
<!-- 是否展开侧边栏 -->
<div class="header-title" @click="foldOrOpen">
<a class="el-icon-s-fold" v-if="foldAside" title="折叠侧边栏" />
<a class="el-icon-s-unfold" v-else title="展开侧边栏" />
</div>
<!-- 设置、⽂档、⽤户设置等 -->
<div class="header-menu">
<el-menu mode="horizontal" class="header-menu-submenu">
<el-menu-item title="设置" index="1" to="/">⽹站⾸页 </el-menu-item>
<el-menu-item title="清除缓存" index="2" @click="onClear">清除缓存 </el-menu-item>
<el-menu-item title="系统更新" index="3" @click="onUpdate"> 系统更新 </el-menu-item>
<el-menu-item title="帮助" index="5">帮助</el-menu-item>
<el-menu-item title="设置" index="4"> <i class="el-icon-setting"></i>设置 </el-menu-item>
<!-- ⽤户设置 -->
<el-submenu title="⽤户设置" index="6">
<template slot="title">
<span class="header-span"> <img src="@/assets/images/avatar.png" :alt="userName" /> {{ userName }} </span>          </template>
<el-menu-item index="6-1" @click="showPasswordBox"> <i class="el-icon-edit"></i>修改密码 </el-menu-item>
<el-menu-item index="6-2" @click="logout"> <i class="el-icon-close"></i>退出 </el-menu-item>
</el-submenu>
</el-menu>
</div>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
// 是否展开侧边栏
foldAside: true,
// 默认⽤户名
userName: 'admin',
// 是否展开密码框
UpdatePasswordVisible: false,
};
},
components: {
},
methods: {
// 展开密码修改框
showPasswordBox() {
this.UpdatePasswordVisible = true;
/
/ this.$nextTick 表⽰数据渲染后，执⾏密码框初始化
this.$nextTick(() => {
this.$refs.updatePassowrd.init();
});
},
// 展开、折叠侧边栏
foldOrOpen() {
alert('侧边栏逻辑未完成');
console.log('foldOrOpen');
},
// 退出登录，回到登录界⾯
/
/ 退出登录，回到登录界⾯
logout() {
// TODO：退出逻辑待完成
alert('退出逻辑未完成');
this.$router.push({
name: 'Login',
});
},
// 清除缓冲
onClear() {
console.log('onClear');
},
// 系统更新
onUpdate() {
console.log('onUpdate');
},
},
};
</script>
<style>
.header {
padding: 0 10px;
display: flex;
height: 50px;
line-height: 50px;
border-bottom: solid 1px #e6e6e6;
}
.header-title {
height: 50px;
width: 50px;
float: left;
font-size: 30px;
cursor: pointer;
}
.header-menu {
height: 50px;
width: 100%;
flex: 1;
line-height: 50px;
font-size: 30px;
}
.header-menu-submenu {
float: right;
}
.
header-submenu-a {
text-decoration: none;
color: #4cc4b8;
font-weight: bold;
font-size: 14px;
}
.header-submenu-a:hover {
background-color: #2c3e50;
}
.el-menu--horizontal > .el-menu-item,
.el-menu--horizontal > .el-submenu .el-submenu__title {  height: 50px !important;
line-height: 50px !important;
padding: 0 10px !important;
}
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
min-width: auto !important;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。