
芋道 Yudao 是一套开源的 Java 企业级快速开发平台,本仓库是其 Vue3 管理后台前端,基于 Vue3、Vite、Element Plus 与 TypeScript 构建,配套 Spring Boot 或 Spring Cloud 后端即可快速交付企业管理系统。
源码系统概览
文章正文
芋道 Yudao 管理后台是一套企业级中后台前端方案,代码全部开源,个人与企业可免费使用。
仓库包含系统管理、基础设施、工作流、支付、商城、CRM、ERP、WMS、MES、AI、物联网、IM 等二十个业务模块的页面代码。
前端采用 Vue3 组合式 API 与 TypeScript 强类型约束,配合 Pinia 状态管理与 Vue Router 动态路由,权限体系支持按钮级控制。
项目强制使用 pnpm 管理依赖,nodejs 版本需高于 16.18.0,pnpm 高于 8.6.0,构建工具为 Vite。
源码简介
本源码是芋道 Yudao 快速开发平台的 Vue3 前端,仓库名 yudao-ui-admin-vue3,版本 2026.07-snapshot,共 2398 个文件,压缩包约 14.7MB。
项目基于 vue-element-plus-admin 改造,换装 Element Plus 组件库,加入 SaaS 多租户与自动导入等能力。
后端支持两种架构,单体版对应 Spring Boot 项目,微服务版对应 Spring Cloud 项目,前端代码通用。
仓库自带 .image 目录,收录官方功能预览与界面截图,可直接用于开发参考与方案演示。
GitHub 原版仓库为 yudaocode/yudao-ui-admin-vue3,持续更新,最近提交包含 lint 配置调整与构建效率优化。
适用场景
企业内部管理系统开发,包含用户、角色、菜单、部门、岗位等基础权限模块。
SaaS 多租户场景,租户套餐按需分配功能,一套代码服务多家客户。
工作流审批系统,内置 BPMN 流程设计器,支持请假、报销、采购等审批流程。
电商、ERP、CRM、WMS、MES 等业务系统前端快速搭建,模块按需启用。
AI 大模型平台、物联网设备管理、IM 即时通讯等创新业务的中后台界面。
功能亮点
RBAC 动态权限,菜单与按钮权限由后端下发,前端按权限自动生成路由与操作按钮。
数据权限隔离,支持部门、岗位、自定义规则多维度数据范围控制。
SaaS 多租户,租户套餐管理、租户隔离,适合平台化运营。
Flowable 工作流,BPMN 可视化设计器,流程表单、任务审批、待办已办完整闭环。
代码生成器,数据库表一键生成前后端 CRUD 代码,缩短开发周期。
多端适配,管理后台之外还有 Vue2、vben5.0、uniapp 移动端等版本。
国际化内置,vue-i18n 方案,文案集中管理,方便多语言扩展。
By the numbers:2398 个源码文件、20 个业务模块、5570+ 次 GitHub 提交、Node.js 16.18 以上即可开发调试。
技术架构与部署指南
技术栈与运行环境
前端框架:Vue3 3.3.8、Vite 4.5.0、Element Plus 2.4.2、TypeScript 5.2.2。
状态与路由:Pinia 2.1.7、Vue Router 4.2.5、VueUse 10.6.1。
样式与图标:UnoCSS 0.57.4、Iconify 3.1.1、wangeditor 富文本 5.1.23。
开发环境:Node.js 大于 16.18.0、pnpm 大于 8.6.0、VS Code 与 Vue 插件。
配套后端:Spring Boot 单体或 Spring Cloud 微服务,数据库 MySQL、缓存 Redis。
安装与部署提示
克隆仓库后先执行 pnpm install 安装依赖,依赖较多请耐心等待。
复制 .env.local 并按需修改后端接口地址,默认走本地开发代理。
执行 pnpm dev 启动开发服务器,浏览器访问本地端口查看登录页。
生产构建执行 pnpm build,产物输出到 dist 目录,配合 Nginx 部署。
完整启动需先准备后端服务与数据库,详细步骤参考芋道官方文档 doc.iocoder.cn。
| 对比项 | 芋道 Yudao Vue3 | 通用 Vue3 后台模板 |
|---|---|---|
| 权限体系 | RBAC 动态路由+按钮权限+数据权限 | 多为前端写死的菜单权限 |
| 多租户 | 内置 SaaS 租户套餐与隔离 | 通常不提供 |
| 工作流 | Flowable+BPMN 可视化设计器 | 一般没有或需自行集成 |
| 代码生成 | 数据库表一键生成前后端 | 少数模板提供简单生成 |
| 业务模块 | 商城/ERP/CRM/WMS/MES/AI/IoT 等 20 个 | 通常只有基础系统功能 |
截图与演示说明
以下截图来自 GitHub yudaocode/yudao-ui-admin-vue3 仓库

首页演示图来自 vue3-ep.png,展示新版后台的整体布局,左侧菜单、顶部导航与内容区域分层清晰。

登录页截图展示账号密码登录界面,支持租户选择与验证码,SaaS 多租户入口在此进入。

首页截图展示工作台布局,包含常用功能入口、待办事项与数据概览卡片。

用户管理页面截图,支持用户增删改查、状态启停与部门归属管理。

角色管理截图展示角色列表与权限分配入口,RBAC 权限体系在此配置。

工作流设计器截图来自 bpmn-designer.jpg,BPMN 流程节点拖拽编排,支持审批人设置。

功能分层图展示系统模块划分,通用模块、可选模块与业务系统按需组合。

代码生成器截图,从数据库表信息一键生成前后端代码,含列表、表单、接口与菜单配置。
常见问题
问:这套源码只有前端吗,能直接运行吗。
答:本仓库是管理后台前端,完整运行需要配套的 Spring Boot 或 Spring Cloud 后端服务与数据库。
问:前后端如何对接,接口地址在哪里配置。
答:接口地址在 .env 系列环境变量文件中配置,开发环境可走 Vite 代理转发。
问:支持多租户吗,租户数据怎么隔离。
答:支持 SaaS 多租户,登录时选择租户,后端按租户 ID 做数据隔离。
问:代码生成器能生成哪些代码。
答:根据数据库表结构生成后端 CRUD、前端列表页与表单页,以及菜单与权限配置。
问:Node 版本要求高吗,老项目能不能直接跑。
答:要求 nodejs 高于 16.18.0 且使用 pnpm,低于该版本可能出现依赖安装失败。
问:是否收费,商业使用有什么限制。
答:项目完全开源,个人与企业可免费使用,GitHub 仓库声明未来也不会有商业版本。
安全风险提示
源码来自公开开源仓库,使用前建议核对后端与数据库连接配置。
生产环境部署前请修改默认账号密码,关闭不必要的调试接口。
本页下载包不包含后端服务,请从 GitHub 原版仓库获取配套后端源码。
二次开发时注意依赖版本升级带来的兼容性问题,升级前备份配置。
下载说明
压缩包为 Vue3 前端源码,不含运行环境,请自行准备 Node.js 与 pnpm。
文件仅供学习与二次开发参考,商业使用请遵守开源协议并保留版权声明。
解压后如遇文件损坏请重新下载,本站不提供人工部署服务。
GitHub项目开源地址:https://github.com/yudaocode/yudao-ui-admin-vue3