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内置功能模块能力登录认证Token 管理、自动登录、过期自动刷新权限系统RBAC 多角色、路由权限、按钮权限v-permission 指令动态路由后端配置驱动、多级嵌套、面包屑、标签页缓存API 封装请求去重、错误码处理、多环境配置高级表格分页/排序/筛选/列配置/行内编辑/导出 Excel/树形表格表单生成器JSON Schema 驱动、14 种字段类型、15 种校验、级联联动数据可视化折线图/柱状图/饼图/地图、主题切换、图表联动、自适应内置 Mock 数据npm install npm run dev直接跑不需要后端。截图预览登录页仪表盘高级表格用户管理表单生成器数据可视化核心设计思路1. 权限系统后端驱动不硬编码很多模板的权限是写死在前端的换个角色就得改代码。这个模板的做法是后端返回菜单配置前端动态生成路由。// store/modules/permission.jsexportconstusePermissionStoredefineStore(permission,(){// 根据用户角色从后端获取可访问的菜单列表// 动态 addRoute不需要在前端维护权限表})路由守卫里自动判断没登录 → 跳登录页没权限 → 跳 404。用户完全不需要关心权限逻辑。2. 高级表格一个组件搞定所有表格后台系统 80% 的页面都是表格。我把分页、排序、筛选、列配置、行内编辑、导出全部封装进去了AdvancedTable :apifetchUserList :columnscolumns :exportabletrue :editabletrue edit-savehandleEdit /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 SchemaFormGenerator :schemaformSchema submithandleSubmit /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、slider15 种校验规则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] }] :smoothtrue / !-- 图表联动多个图表同步高亮、同步 tooltip -- ChartGroup :syncHighlighttrue :syncTooltiptrue BarChart title销售额 :databarData / LineChart title订单量 :datalineData / PieChart title占比 :datapieData / /ChartGroup支持亮色/暗色主题切换、地图下钻、容器自适应。项目结构src/ ├── api/ # 接口层Axios Mock 模块拆分 ├── components/ # 通用组件 │ ├── Table/ # 高级表格 │ ├── Form/ # 表单生成器 │ └── Chart/ # 图表折线/柱状/饼图/地图 ├── composables/ # 组合式函数useTable/useForm/usePermission... ├── directive/ # 自定义指令v-permission/v-debounce ├── layout/ # 布局侧边栏/顶部/标签页/面包屑 ├── router/ # 路由 守卫 动态组件映射 ├── store/modules/ # Piniauser/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测试账号角色账号密码管理员admin123456普通用户user123456对接真实后端内置的 Mock 数据只用于演示对接真实后端只需 3 步.env.development里VITE_USE_MOCK改为false修改VITE_API_BASE_URL为后端地址在src/api/modules/下按模块组织接口Token 刷新、请求拦截、错误处理都已经封装好了直接调 API 就行。适合谁用✅ 接外包项目的快速交付后台系统✅ 公司内部管理系统权限 表格 表单一站搞定✅ 个人项目快速原型省去重复搭建的时间✅ 学习 Vue3 最佳实践Composition API Pinia Router 动态路由开源地址https://gitcode.com/shuaiyao218/vue3-enterprise-adminMIT 协议随便用。如果觉得有帮助给个 Star 支持一下 有问题欢迎 Issue 或评论区交流。