vue3-element-admin

August 2, 2026 · View on GitHub

vue3-element-admin

Vue3 + Vite + TypeScript 企业级中后台前端

rainbow

项目简介

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

环境类型	版本要求	备注
Node.js	`^20.19.0` 或 `>=22.12.0`	推荐 LTS 版本（主版本为偶数）
包管理器	`pnpm >= 8.0.0`	项目使用 pnpm 作为包管理器
开发工具	Visual Studio Code	推荐安装 Vue、TypeScript 相关插件

# 克隆代码
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

生态矩阵

前端

项目	技术栈	说明	更新状态
vue3-element-admin	Vue 3 + Vite + TS + Element Plus	PC 管理前端（主推）	✅️
vue3-element-admin-js	Vue 3 + Vite + JS + Element Plus	JavaScript 版本	✅️
vue3-element-template	Vue 3 + Vite + TS + Element Plus	精简模板	✅️
vue3-naiveui-admin	Vue 3 + Vite + TS + Naive UI	Naive UI 版本	✅️
youlai-app	Vue 3 + UniApp	移动端 App	✅️
youlai-electron	Electron + Vue 3	桌面版	✅️

后端

项目	技术栈	说明	更新状态
youlai-boot	Spring Boot + MyBatis-Plus	Java（主推）	✅️
youlai-nest	NestJS + TypeORM	Node.js	✅️
youlai-gin	Go + Gorm	Go	✅️
youlai-django	Django + DRF	Python	✅️
youlai-fastapi	FastAPI + SQLAlchemy	Python	✅️
youlai-laravel	Laravel + Eloquent	PHP	✅️
youlai-think	ThinkPHP + ThinkORM	PHP	✅️
youlai-aspnet	ASP.NET Core + EF Core	C#	✅️
youlai-axum	Axum + SeaORM	Rust	✅️

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

衍生版本

项目	基于	类型	说明	更新状态
youlai-boot-tenant	youlai-boot	独立仓库	多租户 SaaS，租户隔离与租户配置	✅️
youlai-nest (multi-tenant)	youlai-nest	分支	多租户 SaaS，租户隔离与租户配置	✅️
youlai-boot-flex	youlai-boot	独立仓库	改用 MyBatis-Flex	✅️
youlai-boot (db-pg)	youlai-boot	分支	PostgreSQL 数据库分支	✅️
youlai-boot (multi-module)	youlai-boot	分支	多模块工程拆分	✅️
youlai-boot (spring-boot-3)	youlai-boot	分支	Spring Boot 3 兼容分支	✅️

开发指南

名称	地址
视频教程	https://www.bilibili.com/video/BV1eFUuYyEFj
项目搭建	基于 Vue3 + Vite + TypeScript + Element-Plus 从0到1搭建后台管理系统
官方文档	https://www.youlai.tech/docs/web/
部署指南	https://www.youlai.tech/docs/web/deployment/deploy.html
常见问题	https://www.youlai.tech/docs/faq/
代码规范	ESLint V9 + Prettier + Stylelint + EditorConfig 约束和统一前端代码规范
提交规范	Husky + Lint-staged + Commitlint + Commitizen + cz-git 配置 Git 提交规范
接口文档	https://www.apifox.cn