编辑 | blame | 历史 | 原始文档

vue3-element-admin

![](https://foruda.gitee.com/images/1708618984641188532/a7cca095_716974.png "rainbow.png")

🔍 在线预览 | 📖 阅读文档 | 🌐English

项目简介

vue3-element-template 是 vue3-element-admin 精简的 Vue3 中后台开发模板，采用 Vue3 + Vite6 + TypeScript5 + Element-Plus + Pinia 等前沿技术栈构建，配套提供 Java 后端和 Node 后端，完全免费开源。

项目特色

🚀 核心优势
技术升级：基于经典项目 vue-element-admin 的 Vue3 重构版，避免过度封装，学习曲线平缓
开箱即用：预设代码规范、Git 提交规范和工程化配置，内置常用业务组件
全栈方案：支持本地 Mock 和线上 API 切换，配套 Java 后端系统和在线接口文档
🛡️ 权限体系
完整功能：用户/角色/菜单/字典/部门五位一体的权限管理系统
精细控制：动态路由加载 + 按钮级权限控制，支持国际化多语言方案
🛠️ 持续维护
版本更新：持续跟进主流技术更新，定期升级依赖和工具链
多端适配：提供基础版、开发版、精简版多种形态，满足不同场景需求

项目预览

明亮模式

暗黑模式

接口文档

项目源码

版本类型	功能亮点	Gitee 源码	GitHub 源码	GitCode 镜像
基础版	✅ 权限体系 + 🌐 国际化 + 🛠️ 代码生成 + 🎥 演示案例	vue3-element-admin	vue3-element-admin	vue3-element-admin
开发版	✅ 权限系统 + 📦 基础功能	vue3-element-template	vue3-element-template	vue3-element-template

环境准备

环境	名称版本	下载地址
开发工具	VSCode	下载
运行环境	Node ≥18 (其中 20.6.0 版本不可用)	下载

项目启动

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

# 切换目录
cd vue3-element-template

# 安装 pnpm
npm install pnpm -g

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

# 安装依赖
pnpm install

# 启动运行
pnpm run dev

项目部署

# 项目打包
pnpm run build

# 上传文件至远程服务器
将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。

# nginx.cofig 配置
server {
	listen     80;
	server_name  localhost;
	location / {
			root /usr/share/nginx/html;
			index index.html index.htm;
	}
	# 反向代理配置
	location /prod-api/ {
      # api.youlai.tech 替换后端API地址，注意保留后面的斜杠 /
      proxy_pass http://api.youlai.tech/;
	}
}

本地Mock

项目同时支持在线和本地 Mock 接口，默认使用线上接口，如需替换为 Mock 接口，修改文件 .env.development 的 VITE_MOCK_DEV_SERVER 为 true 即可。

后端接口

如果您具备Java开发基础，按照以下步骤将在线接口转为本地后端接口，创建企业级前后端分离开发环境，助您走向全栈之路。

获取基于 Java 和 SpringBoot 开发的后端 youlai-boot 源码。
根据后端工程的说明文档 README.md 完成本地启动。
修改 .env.development 文件中的 VITE_APP_API_URL 的值，将其从 https://api.youlai.tech 更改为 http://localhost:8989 即可。