首先，创建一个vue项目，这里不做过多阐述，直接写模板
简单的介绍一下一般的页面布局包括顶部导航栏，左侧菜单栏，和主要的信息展示页面
我们直接勾勒出一个这样的架子,这里使用了element-UI，记得用npm下载一下
<div> <el-container> <el-header> 顶层容器 </el-header> </el-container> <el-container> <el-aside> 左侧菜栏 </el-aside> <el-main> 主要信息展示页面 </el-main> </el-container> </div>
编辑接下来开时进行顶层代码的编写：
<div> <el-container> <el-header style="background-color: #e5e5e7;display: flex;align-items: center;justify-content: space-between"> <div style="font-family: 华文行楷;font-size: 30px;">ikun粉丝团人员管理系统</div><div> <el-dropdown @command="handleCmd"> <span class="el-dropdown-link" style="display: flex;align-items: center;cursor: pointer"> <i> <img style="width: 48px;height: 48px;border-radius: 24px;margin-top: 15px;" src="https://wx2.sinaimg.cn/mw2000/50861ae8ly1h71qt55s6kj20u0140n6p.jpg" alt="">头像 </i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="setting">系统设置</el-dropdown-item> <el-dropdown-item command="usercenter">个人中心</el-dropdown-item> <el-dropdown-item command="logout" divided>注销登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </el-header> </el-container> <el-container> <el-aside> 左侧菜栏 </el-aside> <el-main> 主要信息展示页面 </el-main> </el-container> </div>
export default{ methods:{ /** * 这个方法有一个默认的参数，参数值就是每一个菜单项的 command 属性的值 * @param cmd */ handleCmd(cmd) { if (cmd == 'logout') { //注销登录 this.$confirm('是否注销登录?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //执行注销登录，向后台发送注销请求 this.getRequest("注销登录接口地址如：/outLogin"); //删除sessionStorage 中的数据 window.sessionStorage.removeItem("要删除的对象名如: data"); //跳转到项目登录页面 this.$router.replace("登录界面路由地址如：/"); }).catch(() => { this.$message({ type: 'info', message: '已取消' }); }); } } } } </script>
编辑
露出kun脚了，不写了
