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.titlenext() //必須調用的方法
})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-paginationv-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>
<!-- 頁面頭部結束 -->