Vue3集成Element Plus完整指南：从安装到主题定制下-实现后台管理系统框架搭建

王者鳜錸2025-05-25 23:49

本文将详细介绍如何使用 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-pagination
          v-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. 添加动态菜单功能，根据权限生成菜单

这个模板提供了企业级管理系统的基础框架，开发者可以根据实际需求进行扩展和定制。

相关推荐
Space Chars27 分钟前
【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯
服务器·前端·http
Quke陆吾1 小时前
Vue框架1(vue搭建方式1,vue指令,vue实例生命周期)
前端·javascript·vue.js
苹果酱05671 小时前
Java设计模式：探索编程背后的哲学
java·vue.js·spring boot·mysql·课程设计
Oscar_02082 小时前
uniapp+ts 多环境编译
前端·vue.js·typescript·uni-app
shmily麻瓜小菜鸡2 小时前
前端项目中实现页面看起来像是浏览器缩放到了80%的效果
前端
EndingCoder2 小时前
从零基础到最佳实践：Vue.js 系列（9/10）：《单元测试与端到端测试》
前端·javascript·vue.js·性能优化·单元测试·vue3
How_doyou_do2 小时前
Vue-创建应用/挂载应用/根组件模版-.vue单文件/应用配置
前端·javascript·vue.js
YJlio3 小时前
优启通添加自定义浏览器及EXLOAD使用技巧分享
前端
EthanPan_3 小时前
【npm】npm命令大全
前端·npm·node.js
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【2025年最新】OpenWrt 更换国内源的指南（图形界面版)05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06DeepSeek各版本说明与优缺点分析07VMware虚拟机安装Win7专业版保姆级教程（附镜像包）08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Coze扣子平台完整体验和实践（附国内和国际版对比）10巴比达免费内网穿透全面指南