项目简介

vue3-element-admin 基于 Vue 3、Vite、TypeScript、Element Plus 构建的企业级中后台前端，配套 9 种主后端 + 衍生版本（覆盖 Java / Node.js / Go / Python / PHP / C# / Rust 7 种语言）及移动端 youlai-app。其他前端版本：JS 版 · 精简版 · NaiveUI 版 · Electron 桌面版。

项目特色

• 简洁易用 — 基于 vue-element-admin 升级的 Vue3 版本，无过度封装，易上手
• 权限体系 — 动态路由、按钮权限、角色权限和数据权限
• 多租户 — 支持多租户模式与租户隔离
• 基础设施 — 国际化、多布局、暗黑模式、全屏、水印、接口文档、代码生成器
• 数据交互 — 支持 Mock 数据与线上接口文档，配套 Java / Node 后端源码
• 持续更新 — 项目持续开源更新，跟进主流技术栈

系统预览

PC 端

移动端

快速开始

环境要求：Node.js ^20.19.0 或 >=22.12.0 · pnpm >=8.0.0

# 克隆代码
git clone https://gitee.com/youlaiorg/vue3-element-admin.git
cd vue3-element-admin

# 安装 pnpm（已安装可跳过）
npm install pnpm -g

# 设置镜像源（可忽略）
pnpm config set registry https://registry.npmmirror.com

# 安装依赖
pnpm install

# 启动运行
pnpm run dev

启动后访问 http://localhost:3000，使用 admin / 123456 登录。

更多内容详见官方文档：快速开始 · 部署指南

AI 编程

本项目配套 Agent Skill，安装后 AI 编程助手会自动遵循本项目的 Vue3 开发规范（命名、目录结构、BEM + UnoCSS、组件与 API 约定）。支持 CodeBuddy、Claude Code、Cursor、Codex、GitHub Copilot 等 70+ Agent。

npx skills add https://github.com/youlaitech/youlai-skills --skill vue-admin

生态矩阵

前端

后端

九种后端共享同一套 RESTful API 规范 和 数据库结构，前端可无缝切换。

衍生版本

开发指南

项目部署

执行 pnpm run build 打包生成 dist 目录，上传至服务器并配置 Nginx 反向代理。

pnpm run build

详细部署流程（Nginx 配置、反向代理、HTTPS 等）见 部署指南。

数据接口

前端默认使用线上接口，也可切换为本地 Mock 或对接本地后端。

本地 Mock：将 .env.development 的 VITE_MOCK_ENABLED 设为 true 即启用本地 Mock 接口，无需后端即可独立开发。

对接后端：九种后端默认端口均为 8000，将 .env.development 的 VITE_PROXY_TARGET 改为 http://localhost:8000 并启动对应后端即可（主推 Java 后端 youlai-boot，其余见各自仓库 README）。

提交规范

执行 pnpm run commit 唤起 git commit 交互，根据提示完成信息的输入和选择。

技术合作

本项目采用 MIT 协议开源，可免费商用。欢迎在 Issue 提交问题或反馈，也欢迎提交 Pull Request 共建。如需技术支持、商务合作、二次开发或项目定制，可联系作者微信（见下方二维码）。

技术交流 · 问题反馈 · 商务合作