Vue3实战学习（Vue3快速搭建后台管理系统(网页头部、侧边导航栏、主体数据展示区的设计与实现)(超详细)）(9)

目录

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

二、Vue3集成Element-Plus详细教程。(博客链接如下)

三、Vue3集成Vue-Router详细教程。(博客链接如下)

四、Vue3快速搭建后台管理系统。(实战学习)

（1）后台管理系统框架设计。

<1>网页头部分。

<2>左部分侧边导航菜单栏。

<3>右部分：内容的主体设计。

<4>后台管理系统框架（整体布局）设计图示。

（2）父级页面布局设计与实现。

<1>页面头部以下部分实现。

左侧导航栏设计与高度巧妙设定。(element-plus菜单Menu)

右侧主体区域数据展示区设计。

自定义—element-plus的卡片(card)样式。

右侧主体区域设计代码示例。

<2>多级菜单项的配置与实现。

官方示例渲染效果。

配置导航菜单项间的路由跳转。(router)

解决：刷新页面后—"高亮"显示当前路由菜单。(defalut-active)

设置css样式——选中某个菜单项的整体背景与文字都"高亮"显示。

<3>页面头部的渲染实现。

中间布局分隔。（style="flex:1"）

头部右部分。（头像、用户名实现）

优化导航栏的菜单项显示。

设置多级菜单项默认展开子菜单。(default-openeds)

 头部左部分。(标题、logo实现)

---

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

• Vue3实战学习（Vue环境配置、快速上手及卸载Node.js、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像）(1)_vue淘宝镜像-CSDN博客
• Vue3实战学习（IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程）(2)_vue在idea打开-CSDN博客
• Vue3实战学习（Vue3的基础语法学习与使用(超详细)）(3)_vue3 {... }-CSDN博客
• Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入 。按钮、图标组件。自定义主题的实现)(超详细)）(4)_vue3安装依赖-CSDN博客

二、Vue3集成Element-Plus详细教程。(博客链接如下)

• Vue3实战学习（Element-Plus常用组件的使用(输入框、下拉框、单选框多选框、el-image图片)）(上)(5)_el-input textarea clearable-CSDN博客
• Vue3实战学习（Element-Plus常用组件的使用(轮播图、日期时间选择器、表格、分页组件、对话框)(超详细)）(下)(6)-CSDN博客

三、Vue3集成Vue-Router详细教程。(博客链接如下)

• Vue3实战学习（Vue3集成Vue-Router(路由跳转、编程式路由跳转。路由跳转的单参数、多参数传递。设置默认页面路由)）(上)(7)-CSDN博客
• Vue3实战学习（Vue3集成Vue-Router(嵌套路由、路由守卫、404NotFound页面设计与路由配置)）(下)(8)-CSDN博客

四、Vue3快速搭建后台管理系统。(实战学习)

• 独自学会使用Vue3搭建后台管理系统的基本框架。(网页整体框架的渲染与内容设计、布局)

（1）后台管理系统框架设计。

• 整个管理系统框架分为“网页头部分”、“侧边菜单栏(导航栏)”、“主体区域内容”3个部分。

<1>网页头部分。

• 头部分的左边分别为：网页标题、logo设计。
• 头部分的右边分为：用户头像(文件上传模块)、用户名。

---

<2>左部分侧边导航菜单栏。

• 鼠标点击——>切换每一个导航菜单——>到达不同的数据页面。

---

<3>右部分：内容的主体设计。

• 右部分：作为数据展示区域。(Echarts图表、公告、网页信息、数据信息表格、表单等)

---

<4>后台管理系统框架（整体布局）设计图示。

（2）父级页面布局设计与实现。

• 父级页面：Manager.vue页面。采用嵌套路由实现父、子页面的渲染。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {path:'/',redirect:'/manager/home'},
    {path:'/manager',meta:{ title:'父级页面'},component: () => import('../views/Manager.vue'),children:[
        {path: 'home', name: 'home', meta:{ title:'主页'}, component: () => import('../views/Home.vue')}, // url:/manager/home
        {path: 'test', name: 'test', meta:{ title:'测试数据页01'},  component: () => import('../views/Test.vue')}, // url:/manager/test
        {path: 'demo', name: 'demo', meta:{ title:'测试数据页02'},  component: () => import('../views/Demo.vue')}, // url:/manager/demo
        {path: 'data', name: 'data', meta:{ title:'数据展示页面'},  component: () => import('../views/Data.vue')}, // url:/manager/data
      ]},
      {path: '/404', name: 'NotFound', meta:{ title:'404找不到页面'}, component: () => import('../views/404.vue')},
      {path:'/:pathMatch(.*)',redirect:'/404'}
  ],
})

router.beforeEach((to,from,next)=>{
    //设置即将跳转的路由页面的网页标题
    document.title=to.meta.title
    next() //必须调用的方法
})


export default router

---

<1>页面头部以下部分实现。

• 左侧导航栏设计与高度巧妙设定。(element-plus菜单Menu)

• 官方文档。

---

• 设置官方给的标签<el-menu>自带的border为0。因为不好看且最小视窗高度没有设定。

• 所以需要自己手动使用min-height进行设定。这样就让它根据内容进行填充border。

---

• 代码示例。

<template>
<!-- 页面头部开始 -->
  <div style="height: 50px;background-color: #2597e8">

  </div>
<!-- 页面头部结束 -->

<!-- 页面下面部分开始 -->
<!-- flex布局分为左右两边 -->
  <div style="display: flex">

      <!-- 侧边导航栏开始   -->
    <div style="width: 200px;border: 1px solid #ddd;min-height: calc(100vh - 50px)" >
      <el-menu style="border: 0">
<!--    菜单项    -->
        <el-menu-item>系统首页</el-menu-item>
        <el-menu-item>数据统计</el-menu-item>
      </el-menu>
    </div>
      <!-- 侧边导航栏结束   -->

      <!-- 右侧主体区域开始  -->
      <!-- 右侧设置自适应宽度   -->
      <!--  flex是一个 CSS弹性盒布局属性的简写形式，flex: 1 等同于 flex: 1 1 0%。当父容器有剩余空间时，该元素可以按照比例进行扩展，这里是占据所有剩余空间  -->
    <div style="flex: 1;width: 0;background-color: #edf3f9;padding: 10px">
      <RouterView/>
    </div>

      <!-- 右侧主体区域结束  -->

  </div>
<!-- 页面下面部分结束 -->

</template>

<script setup>

</script>

• 页面渲染效果。

---

• 右侧主体区域数据展示区设计。

• 通过<RouterView/>将嵌套子路由页面渲染出来。

<!-- 右侧主体区域开始  -->
      <!-- 右侧设置自适应宽度   -->
      <!--  flex是一个 CSS弹性盒布局属性的简写形式，flex: 1 等同于 flex: 1 1 0%。当父容器有剩余空间时，该元素可以按照比例进行扩展，这里是占据所有剩余空间  -->
    <div style="flex: 1;width: 0;background-color: #edf3f9;padding: 10px">
      <RouterView/>
    </div>
<!-- 右侧主体区域结束  -->

• 设置新页面路由。

---

• 自定义—element-plus的卡片(card)样式。

• 官方文档。

---

• 自定义的卡片(card)样式配置到全局样式中(global.css)。css样式代码示例。

body{
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: #333;
}

/*自定义卡片样式*/
.card{
    /*背景*/
    background-color: white;
    /*内边距*/
    padding: 10px;
    /*圆边角设定*/
    border-radius: 4px;
    /*设置阴影效果*/
    box-shadow: 0 0 12px rgba(0,0,0,0.12)  ;
}

---

• 应用卡片样式后的简单代码示例。

<template>
  <div>
    <div class="card">
      <el-input style="width: 240px" v-model="data.name" placeholder="请根据名称查询" :prefix-icon="Search"></el-input>
    </div>

  </div>
</template>

<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";

const data = reactive({
  name:'',

})

</script>

<style scoped>

</style>

• 加入卡片样式后的页面渲染效果。

---

• 右侧主体区域设计代码示例。

• 注意：到这里都只是前端页面的渲染效果。关于前后端的数据交换，实现数据库的增删改查后才能完成真正的按钮功能、分页查询效果。

<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input style="width: 240px" v-model="data.name" placeholder="请根据名称查询" :prefix-icon="Search"></el-input>
      <el-button type="primary" style="margin-left: 10px">查 询</el-button>
      <el-button type="warning" style="margin-left: 10px">重 置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-button type="primary" style="margin-left: 10px">新 增</el-button>
      <el-button type="warning" style="margin-left: 10px">批量删除</el-button>
      <el-button type="info" style="margin-left: 10px">导 入</el-button>
      <el-button type="success" style="margin-left: 10px">导 出</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <div style="margin: 30px">
        <el-table :data="data.tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="日期"/>
          <el-table-column prop="name" label="名字"/>
          <el-table-column prop="address" label="地址"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" circle>
                <el-icon><Edit /></el-icon>
              </el-button>
              <el-button type="danger" circle>
                <el-icon><Delete /></el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 10px">
        <el-pagination
            v-model:current-page="data.currentPage"
            v-model:page-size="data.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
        />
      </div>
    </div>
    
  </div>
</template>

<script setup>
import {reactive} from "vue";
import {Delete, Edit, Search} from "@element-plus/icons-vue";

const data = reactive({
  name:'',
  currentPage:1,
  pageSize:5,
  total:40,
  tableData:[
    { id:1, date:'2025-3-11',name:'岁岁岁平安',address:'北京大兴' },
    { id:2, date:'2025-5-11',name:'张三',address:'湖南常德' },
    { id:3, date:'2025-1-11',name:'李四',address:'上海浦东' },
    { id:4, date:'2025-3-11',name:'阿萨琪',address:'深圳北' },
    { id:5, date:'2025-3-11',name:'王五',address:'北京玉泉' },
    { id:6, date:'2025-5-11',name:'小菲菲',address:'湖南益阳' },

  ],

})

</script>

<style scoped>

</style>

• 页面渲染效果。

---

<2>多级菜单项的配置与实现。

• 官方示例渲染效果。

---

• 侧边导航栏代码示例。

  <!-- 侧边导航栏开始   -->
    <div style="width: 200px;border: 1px solid #ddd;min-height: calc(100vh - 50px)" >
      <el-menu style="border: 0">
<!--    菜单项    -->
        <el-menu-item>
          <el-icon><House/></el-icon>
          系统首页
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><user /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item>管理员信息</el-menu-item>
          <el-menu-item>普通用户信息</el-menu-item>
        </el-sub-menu>
        <el-menu-item>
          <el-icon><DataAnalysis /></el-icon>
          数据统计
        </el-menu-item>
      </el-menu>
    </div>
<!-- 侧边导航栏结束   -->

• 页面渲染效果。

---

• 配置导航菜单项间的路由跳转。(router)

• 使用router属性配置父标签<el-menu>。
• 使用index配置子标签<el-menu-item>各路由的路由跳转。

---

---

---

---

• 解决：刷新页面后—"高亮"显示当前路由菜单。(defalut-active)

• 未设置属性defalut-active刷新页面时高亮显示异常。

---

• 使用绑定当前路由并指定其高亮显示：":defalut-active"=xxxx即可完成。

---

• 代码示例如下。

<!-- 侧边导航栏开始   -->
    <div style="width: 200px;border: 1px solid #ddd;min-height: calc(100vh - 50px)" >
      <el-menu router :default-active="router.currentRoute.value.path" style="border: 0">
<!--    菜单项    -->
        <el-menu-item index="/manager/home" >系统首页</el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><user /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item>管理员信息</el-menu-item>
          <el-menu-item>普通用户信息</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/manager/data">数据统计</el-menu-item>
      </el-menu>
    </div>
<!-- 侧边导航栏结束   -->

• 刷新页面后——>菜单项文字的正常高亮显示。

---

• 设置css样式——选中某个菜单项的整体背景与文字都"高亮"显示。

• 在父级页面（Manager.vue）中书写css样式代码。
• 基本原理：设置标签选择器。当菜单项被选中时，新增背景，完成"高亮显示"。

<style scoped>
.el-menu .is-active {
  background-color: #e6ecf7;
}
</style>

• 页面渲染效果。高亮时的浅蓝色背景色。

---

---

<3>页面头部的渲染实现。

• 中间布局分隔。（style="flex:1"）

• 在头部的中间部分使用<div style="flex:1">通常用在flex布局的父容器中，起到占据剩余空间的作用。常用于布局分隔或控制其他元素的位置。

---

• 头部右部分。（头像、用户名实现）

• 官方文档。

---

• 后面再实现文件上传“真头像”。这里使用网络地址"假头像"完成前端后台管理系统搭建。
• 页面渲染效果。

---

• 代码示例1。(width使用自适应属性fit-content)

<!-- 页面头部开始 -->
  <div style="height: 60px;background-color: #2597e8;display: flex;align-items: center">
    <!--  左半部分-标题与logo  -->
    <div style="margin-left: 5px;font-size: 18px;display: flex;align-items: center;color: white">岁岁岁平安-后台管理系统</div>
    <!-- 中间部分   -->
    <div style="flex: 1"></div>
    <!--  右半部分-头像  -->
    <div style="width: fit-content;display: flex;align-items: center;padding-right: 10px">
      <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" style="width: 40px;height: 40px">
      <span style="margin-left: 5px;color: white">岁岁岁平安</span>
    </div>
  </div>
<!-- 页面头部结束 -->

• 页面渲染效果1。

---

• 代码示例2。(顺其自然)

<!-- 页面头部开始 -->
  <div style="height: 60px;background-color: #2597e8;display: flex;align-items: center">
    <!--  左半部分-标题与logo  -->
    <div style="margin-left: 5px;font-size: 18px;display: flex;align-items: center;color: white">岁岁岁平安-后台管理系统</div>
    <!-- 中间部分   -->
    <div style="flex: 1"></div>
    <!--  右半部分-头像  -->
    <div style="width: 150px;display: flex;align-items: center">
      <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" style="width: 40px;height: 40px">
      <span style="margin-left: 5px;color: white">岁岁岁平安</span>
    </div>
  </div>
<!-- 页面头部结束 -->

• 页面渲染效果2。

---

• 优化导航栏的菜单项显示。

• 代码示例。

<!-- 侧边导航栏开始   -->
    <div style="width: 200px;border: 1px solid #ddd;min-height: calc(100vh - 60px)" >
      <el-menu router :default-active="router.currentRoute.value.path" style="border: 0">
<!--    菜单项    -->
        <el-menu-item index="/manager/home" >
          <el-icon><House/></el-icon>
          系统首页
        </el-menu-item>
        <el-menu-item index="/manager/data">
          <el-icon><DataAnalysis /></el-icon>
          数据统计
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><user /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item>管理员信息</el-menu-item>
          <el-menu-item>普通用户信息</el-menu-item>
        </el-sub-menu>
        <el-menu-item>
          <el-icon><UserFilled /></el-icon>
          个人信息
        </el-menu-item>
        <el-menu-item>
          <el-icon><SwitchButton/></el-icon>
          退出登录
        </el-menu-item>
      </el-menu>
    </div>
<!-- 侧边导航栏结束   -->

import {DataAnalysis, House, SwitchButton, User, UserFilled} from "@element-plus/icons-vue";
import router from "@/router/index.js";

• 页面渲染效果。

---

• 设置多级菜单项默认展开子菜单。(default-openeds)

• 官方文档。

• 代码示例。

• 页面渲染效果。

---

•  头部左部分。(标题、logo实现)

• 官方logo下载地：iconfont-阿里巴巴矢量图标库
• 图片保存路径到项目的静态资源目录。

• 代码示例。

<!-- 页面头部开始 -->
  <div style="height: 60px;background-color: #2597e8;display: flex;align-items: center">
    <!--  左半部分-标题与logo  -->
    <div style="margin-left: 5px;display: flex;align-items: center;">
      <img src="@/assets/logo02.png" alt="" style="width: 40px;padding-right: 5px">
      <span style="color: white;font-size: 18px;">岁岁岁平安-后台管理系统</span>
    </div>
    <!-- 中间部分   -->
    <div style="flex: 1"></div>
    <!--  右半部分-头像  -->
    <div style="width: 150px;display: flex;align-items: center">
      <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" style="width: 40px;height: 40px">
      <span style="margin-left: 5px;color: white">岁岁岁平安</span>
    </div>
  </div>
<!-- 页面头部结束 -->

• 页面渲染效果。