Vue3 企业级后台模板：权限、高级表格、表单生成器，开箱即用

Vue3 企业级后台模板：权限、高级表格、表单生成器，开箱即用

项目地址：[https://gitcode.com/shuaiyao218/vue3-enterprise-admin]
[https://gitcode.com/shuaiyao218/vue3-enterprise-admin]

你是不是也遇到过这些问题？

每次接新项目，第一件事都是：

• 搭登录页 + Token 管理
• 写路由守卫 + 权限拦截
• 搞动态菜单 + 面包屑 + 标签页
• 封装表格组件（分页、排序、筛选、导出……）
• 再做一套表单校验规则

这些功能每个项目都要写，但又不是核心业务逻辑。每次从零开始，少说浪费 3-5 天。

我把自己常用的后台模板整理了一下，封装成了这个开源项目。权限系统、高级表格、表单生成器、数据可视化全部开箱即用，拿到手改改配置就能跑。

项目概览

技术栈：Vue 3.5 + Vite 8 + Pinia + Vue Router 5 + Element Plus + ECharts + Axios

内置功能：

内置 Mock 数据，npm install && npm run dev直接跑，不需要后端。

截图预览

登录页

仪表盘

高级表格（用户管理）

表单生成器

数据可视化

核心设计思路

1. 权限系统：后端驱动，不硬编码

很多模板的权限是写死在前端的，换个角色就得改代码。这个模板的做法是：后端返回菜单配置，前端动态生成路由。

// store/modules/permission.jsexportconstusePermissionStore=defineStore('permission',()=>{// 根据用户角色，从后端获取可访问的菜单列表// 动态 addRoute，不需要在前端维护权限表})

路由守卫里自动判断：没登录 → 跳登录页；没权限 → 跳 404。用户完全不需要关心权限逻辑。

2. 高级表格：一个组件搞定所有表格

后台系统 80% 的页面都是表格。我把分页、排序、筛选、列配置、行内编辑、导出全部封装进去了：

<AdvancedTable :api="fetchUserList" :columns="columns" :exportable="true" :editable="true" @edit-save="handleEdit" />

columns里配一下就行，支持 slot 自定义渲染：

constcolumns=[{prop:'id',label:'ID',sortable:true},{prop:'name',label:'姓名'},{prop:'status',label:'状态',slot:'status'},{prop:'actions',label:'操作',slot:'actions'}]

支持的特性：

• ✅ 分页（后端/前端）
• ✅ 列排序（升序/降序/默认）
• ✅ 列筛选（单值/多值/日期范围/数字范围）
• ✅ 列配置（显隐/拖拽排序/固定列）
• ✅ 行内编辑（点击编辑/弹窗编辑/整行编辑）
• ✅ 导出 Excel
• ✅ 多选/树形表格

3. 表单生成器：JSON 配置，不用写模板

复杂的表单页面，字段多了模板代码特别长。用表单生成器，只需要传一个 JSON Schema：

<FormGenerator :schema="formSchema" @submit="handleSubmit" />

constformSchema={fields:[{prop:'name',label:'姓名',type:'input',rules:[{type:'required'}]},{prop:'email',label:'邮箱',type:'input',rules:[{type:'email'}]},{prop:'role',label:'角色',type:'select',options:[{label:'管理员',value:'admin'},{label:'用户',value:'user'}]},{prop:'dept',label:'部门',type:'select',options:[...]}],linkage:{// 联动逻辑：选了"管理员"才显示部门字段showHide:[{watchField:'role',targetField:'dept',condition:'admin'}]}}

14 种字段类型：input、textarea、select、radio、checkbox、switch、date、time、upload、cascader、tree-select、number、rate、slider

15 种校验规则：required、min/max、email、phone、url、pattern、length、validator 自定义……

4. 数据可视化：ECharts 深度封装

折线图、柱状图、饼图、地图，全部封装好了，传数据就出图：

<LineChart title="月度销售趋势" :xAxisData="['1月', '2月', '3月', '4月']" :data="[{ name: '产品A', data: [120, 132, 101, 134] }]" :smooth="true" /> <!-- 图表联动：多个图表同步高亮、同步 tooltip --> <ChartGroup :syncHighlight="true" :syncTooltip="true"> <BarChart title="销售额" :data="barData" /> <LineChart title="订单量" :data="lineData" /> <PieChart title="占比" :data="pieData" /> </ChartGroup>

支持亮色/暗色主题切换、地图下钻、容器自适应。

项目结构

src/ ├── api/ # 接口层（Axios + Mock + 模块拆分） ├── components/ # 通用组件 │ ├── Table/ # 高级表格 │ ├── Form/ # 表单生成器 │ └── Chart/ # 图表（折线/柱状/饼图/地图） ├── composables/ # 组合式函数（useTable/useForm/usePermission...） ├── directive/ # 自定义指令（v-permission/v-debounce） ├── layout/ # 布局（侧边栏/顶部/标签页/面包屑） ├── router/ # 路由 + 守卫 + 动态组件映射 ├── store/modules/ # Pinia（user/permission/app） ├── utils/ # 工具函数（auth/validate/export/chart...） └── views/ # 页面（login/dashboard/user/order/form/chart/settings...）

6 份配套文档：接口配置、菜单配置、权限控制、表格使用、表单配置、图表组件。

快速开始

# 克隆gitclone https://gitcode.com/shuaiyao218/vue3-enterprise-admin.gitcdvue3-enterprise-admin# 安装 + 启动npminstallnpmrun dev

访问http://localhost:5173，测试账号：

对接真实后端

内置的 Mock 数据只用于演示，对接真实后端只需 3 步：

1. .env.development里VITE_USE_MOCK改为false
2. 修改VITE_API_BASE_URL为后端地址
3. 在src/api/modules/下按模块组织接口

Token 刷新、请求拦截、错误处理都已经封装好了，直接调 API 就行。

适合谁用？

• ✅ 接外包项目的（快速交付后台系统）
• ✅ 公司内部管理系统（权限 + 表格 + 表单一站搞定）
• ✅ 个人项目快速原型（省去重复搭建的时间）
• ✅ 学习 Vue3 最佳实践（Composition API + Pinia + Router 动态路由）

开源地址

https://gitcode.com/shuaiyao218/vue3-enterprise-admin

MIT 协议，随便用。如果觉得有帮助，给个 Star 支持一下 🙏

有问题欢迎 Issue 或评论区交流。