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

本文将详细介绍如何使用 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. 使用 createRoutercreateWebHistory 创建基于 HTML5 历史模式的路由

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

  3. /composite 作为父路由,包含两个子路由:homeabout

  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. 添加动态菜单功能,根据权限生成菜单

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

相关推荐
人工智能训练师5 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny075 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy6 小时前
css的基本知识
前端·css
昔人'6 小时前
css `lh`单位
前端·css
前端君7 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6148 小时前
Web前端面试题(2)
前端
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队9 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光9 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军9 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite