?

本文將詳細介紹如何使用 Vue 3 構建一個綜合管理系統，包括路由配置、頁面布局以及常用組件集成。

一、路由配置

首先，我們來看系統的路由配置，這是整個應用的基礎架構：

import {createRouter, createWebHistory} from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL), routes: [{path: '/', redirect: '/composite/home' // 默認重定向到首頁}, {path: '/composite', component: () => import('@/vue_views/Composite.vue'), children: [{path: 'home', component: () => import('@/vue_views/Home.vue')}, {path: 'about', component: () => import('@/vue_views/About.vue')}]}, {path: '/not_found', component: () => import('@/vue_views/404.vue')}, {path: '/:patchMatch(.*)', redirect: '/not_found' // 捕獲所有未匹配路由}],
})export default router

路由配置說明：

1. 使用?createRouter?和?createWebHistory?創建基于 HTML5 歷史模式的路由

2. 默認路由?/?重定向到?/composite/home

3. /composite?作為父路由，包含兩個子路由：home?和?about

4. 配置了 404 頁面處理，使用?:patchMatch(.*)?捕獲所有未匹配的路由

二、主頁面布局 (Composite.vue)

主頁面采用經典的頭部+側邊欄+內容區布局：

<template><div><!-- 1.頭部區域開始 --><div style="height: 60px; display: flex"><!-- 1.1左側LOGO區域 --><div style="width: 240px;display: flex;align-items: center; padding-left: 20px; background-color: #304156"><img src="@/css_image_assets/logo.svg" alt="" style="width: 40px;height: 40px;border-radius: 50%"><span style="font-size: 20px;font-weight: bold;color : white">綜合管理系統</span></div><!-- 1.2頁眉區域 --><div style="flex: 1;display: flex;align-items: center;padding-left: 20px; border-bottom: 1px solid #ddd;">首頁 / 數據類型</div><!-- 1.3頭像區域 --><div style="width: fit-content;padding-right: 20px;display: flex;align-items: center;border-bottom: 1px solid #ddd"><el-dropdown><div style="display: flex;align-items: center;"><img style="width: 40px;height: 40px; border-radius: 50%"src="https://wdfgdzx.top:3333/document/cd39af3e175b4524890c267e07298f5b.png" alt=""><span style="margin-left: 5px;">管理員</span><el-icon><ArrowDown/></el-icon></div><template #dropdown><el-dropdown-menu><el-dropdown-item>個人信息</el-dropdown-item><el-dropdown-item>退出登錄</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div><!-- 1.頭部區域結束 --><!-- 2.下方區域開始 --><div style="display: flex"><!-- 2.1菜單區域開始 --><div style="width:240px; "><el-menu :default-openeds="['1']" :default-active="router.currentRoute.value.path"style="min-height: calc(100vh - 60px)"router>  <!-- 關鍵：添加router屬性 --><el-menu-item index="/composite/home"><el-icon><House/></el-icon><span>首頁</span></el-menu-item><el-sub-menu index="1"><template #title><el-icon><location/></el-icon><span>數據管理</span></template><el-menu-item index="/composite/about">關于我們</el-menu-item></el-sub-menu></el-menu></div><!-- 2.1菜單區域結束 --><!-- 2.2數據渲染區域開始 --><div style="margin: 10px;background-color:#cbcbcb; flex:1; width: 0; margin: 10px; "><RouterView/></div><!-- 2.2數據渲染區域結束 --></div><!-- 2.下方區域結束 --></div>
</template><script setup>
import router from "@/js_router/router.js";
</script><style>
/* 設置菜單背景顏色 */
.el-menu {background-color: #304156;border: none;
}/* 設置菜單文字顏色 */
.el-sub-menu__title {color: white;
}/* hover的時候改變背景顏色 */
.el-sub-menu__title:hover {background-color: #cbcbcb;
}.el-menu-item {height: 50px;color: white;
}/* hover的時候改變背景顏色 */
.el-menu-item:hover {background-color: #cbcbcb;
}/* 設置高亮的文字顏色 */
.el-menu .is-active {color: yellow;
}.el-dropdown {cursor: pointer;
}/* 移出鼠標移入時的顯示框 */
.el-tooltip__trigger {outline: none;
}.el-menu--inline .el-menu-item {padding-left: 48px !important;
}
</style>

三、數據展示頁面 (Home.vue)

數據展示頁面包含查詢表單、操作按鈕、數據表格和分頁組件：

<template><div><!-- 查詢表單 --><div class="card mb-5"><el-input style="width: 240px;" v-model="data.name" placeholder="請輸入名稱查詢"></el-input><el-button type="primary" class="ml-10">查詢</el-button></div><!-- 操作按鈕區 --><div class="card mb-5"><el-button type="danger">批量刪除</el-button><el-button type="primary">新增</el-button><el-button type="success">批量導入</el-button><el-button type="info">批量導出</el-button></div><!-- 數據表格 --><div class="card mb-5"><el-table :data="data.tableData" style="width: 100%":header-cell-style="{fontWeight:'bold',color:'#333',backgroundColor:'#eaf4ff'}"><el-table-column type="selection" width="55"/><el-table-column prop="name" label="名稱" width="180"/><el-table-column prop="phone" label="電話"/><el-table-column prop="address" label="地址" width="180"/></el-table></div><!-- 分頁組件 --><div class="card"><el-paginationv-model:current-page="data.pageNum":page-size="data.pageSize"layout="total, prev, pager, next":total="data.total"/></div></div>
</template><script setup>
import {reactive} from 'vue';const data = reactive({name: null,pageNum: 1,pageSize: 5,total: 6,tableData: [{name: 'Tom',phone: '0123456789',address: '安徽省合肥市',}, {name: 'Jack',phone: '13703619524',address: '上海市徐匯區',}, {name: 'Rose',phone: '15921291672',address: '北京市海淀區',}]
})
</script>

四、技術要點總結

1. 路由配置：

   • 使用 Vue Router 4.x 版本

   • 采用嵌套路由組織頁面結構

   • 配置了默認路由和 404 處理

2. 頁面布局：

   • 采用經典的頭部+側邊欄+內容區布局

   • 使用 Element Plus 的菜單組件實現導航

   • 通過?RouterView?動態渲染子路由內容

3. 數據展示：

   • 使用 Element Plus 的表格組件展示數據

   • 集成查詢表單和分頁功能

   • 提供批量操作按鈕

4. 樣式處理：

   • 自定義 Element Plus 組件樣式

   • 使用 Flex 布局實現響應式設計

   • 通過 CSS 變量控制主題顏色

五、擴展建議

1. 可以添加路由守衛實現權限控制

2. 集成 Axios 實現數據請求

3. 使用 Pinia 進行狀態管理

4. 添加動態菜單功能，根據權限生成菜單

這個模板提供了企業級管理系統的基礎框架，開發者可以根據實際需求進行擴展和定制。