一、前言
在前面一章中，我对个人博客前端项目进行了初始化工作，本章节主要是对前端项目的后台管理页面进行布局，预想中的后台管理页面和掘金的创作者中心比较相似，由顶部导航栏，左侧菜单栏，右边主体部分三部分组成。
网络异常，图片无法展示
|
二、布局
新建basePage.vue , 文件位置如下
网络异常，图片无法展示
|
在element plus中我们选择和前言所述相同的布局容器，开始copy，
网络异常，图片无法展示
|
在src\page\backStage\layout\basePage.vue文件中具体实现代码如下：
<template> <div class="common-layout"> <el-container> <el-header class="pageNavi">导航</el-header> <el-container> <el-aside width="400px" class="menuList">菜单栏</el-aside> <el-main class="rightContent">右侧内容</el-main> </el-container> </el-container> </div> </template> <script> export default { data() { return { } }, methods:{ }, created(){ }, } </script> <style lang="less" scoped> .header{ background-color: aqua; } .aside{ background-color: blue; } .main{ background-color: coral; } *{ padding: 0; margin: 0; } </style> 复制代码
效果如下：
网络异常，图片无法展示
|
导航栏
因为是后台管理页面，所以导航栏只是简单的写了宁轩 / 个人博客，具体的页面跳转等在左侧菜单栏完成
新建 src\page\backStage\layout\pageNavi.vue 文件 .admin-header-left{ color: #fff; font-size: 24px; font-weight: 500; }
菜单栏
菜单栏使用element plus的css样式， 具体样式跳转
网络异常，图片无法展示
|
代码中抛出此页面,并在basePage.vue文件中展示出来
<template> <el-radio-group v-model="isCollapse" style="margin-bottom: 20px"> <el-radio-button :label="false">expand</el-radio-button> <el-radio-button :label="true">collapse</el-radio-button> </el-radio-group> <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen" @close="handleClose" > <el-sub-menu index="1"> <template #title> <el-icon><location /></el-icon> <span>Navigator One</span> </template> <el-menu-item-group> <template #title><span>Group One</span></template> <el-menu-item index="1-1">item one</el-menu-item> <el-menu-item index="1-2">item two</el-menu-item> </el-menu-item-group> <el-menu-item-group title="Group Two"> <el-menu-item index="1-3">item three</el-menu-item> </el-menu-item-group> <el-sub-menu index="1-4"> <template #title><span>item four</span></template> <el-menu-item index="1-4-1">item one</el-menu-item> </el-sub-menu> </el-sub-menu> <el-menu-item index="2"> <el-icon><icon-menu /></el-icon> <template #title>Navigator Two</template> </el-menu-item> <el-menu-item index="3" disabled> <el-icon><document /></el-icon> <template #title>Navigator Three</template> </el-menu-item> <el-menu-item index="4"> <el-icon><setting /></el-icon> <template #title>Navigator Four</template> </el-menu-item> </el-menu> </template> <script lang="ts" setup> import { ref } from 'vue' import { Document, Menu as IconMenu, Location, Setting, } from '@element-plus/icons-vue' const isCollapse = ref(true) const handleOpen = (key: string, keyPath: string[]) => { console.log(key, keyPath) } const handleClose = (key: string, keyPath: string[]) => { console.log(key, keyPath) } name:'leftMenu' </script> <style> .el-menu-vertical-demo:not(.el-menu--collapse) { /* width: 200px; */ min-height: 400px; } </style> 复制代码
<template> <div class="common-layout"> <el-container> <el-header class="pageNavi"> <topHeader ></topHeader> </el-header> <el-container> <el-aside class="menuList"> <leftMenu></leftMenu> </el-aside> <el-main class="rightContent">右侧内容</el-main> </el-container> </el-container> </div> </template> <script> import topHeader from '@/page/backStage/layout/pageNavi.vue' import leftMenu from '@/page/backStage/layout/leftMenu.vue' export default { components: { topHeader, leftMenu }, data() { return { } }, methods: { }, created() { }, } </script> 复制代码
总结
本章中完成了后端管理页面的菜单布局,本来没想就搞这点,但是确实有点东西不会了,先去研究研究,下一章见
