代码拉取完成，页面将自动刷新
vue3-element-admin-js 基于 Vue3、Vite、JavaScript 和 Element-Plus 搭建的极简开箱即用企业级后台管理前端模板。 （配套 Java 后端 youlai-boot 和 Node 后端 youlai-nest）。
简洁易用：基于 vue3-element-admin 的 JavaScript 版本，适合快速开发。
系统功能： 提供用户管理、角色管理、菜单管理、部门管理、字典管理等功能模块。
权限管理： 支持动态路由、按钮权限、角色权限和数据权限等多种权限管理方式。
基础设施： 提供国际化、多布局、暗黑模式、全屏、水印、接口文档和代码生成器等功能。
持续更新：项目持续开源更新，实时更新工具和依赖。
| 项目 | Gitee | Github | GitCode |
|---|---|---|---|
| vue3-element-admin JS版 | vue3-element-admin-js | vue3-element-admin-js | vue3-element-admin-js |
| vue3-element-admin 标准版 | vue3-element-admin | vue3-element-admin | vue3-element-admin |
| vue3-element-admin 精简版 | vue3-element-template | vue3-element-template | - |
| Java 后端 | youlai-boot | youlai-boot | youlai-boot |
| Node 后端 | youlai-nest | youlai-nest | youlai-nest |
| 环境类型 | 版本要求 | 下载链接 |
|---|---|---|
| 开发工具 | Visual Studio Code (最新版) | 官方下载 |
| 运行环境 | Node.js 18.x (推荐18.16.1) | 中文镜像 |
⚠️ 注意：Node.js 20.6.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
执行 pnpm run build 命令后，项目将被打包并生成 dist 目录。接下来，将 dist 目录下的文件上传到服务器 /usr/share/nginx/html 目录下，并配置 Nginx 进行反向代理。
pnpm run build
以下是 Nginx 的配置示例：
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/;
}
}
更多详细信息，请参考这篇文章：Nginx 安装和配置。
项目同时支持在线和本地 Mock 接口，默认使用线上接口，如需替换为 Mock 接口，修改文件 .env.development 的 VITE_MOCK_DEV_SERVER 为 true 即可。
如果您具备Java开发基础，按照以下步骤将在线接口转为本地后端接口，创建企业级前后端分离开发环境，助您走向全栈之路。
Java 和 SpringBoot 开发的后端 youlai-boot 源码。.env.development 文件中的 VITE_APP_API_URL 的值，将其从 https://api.youlai.tech 更改为 http://localhost:8989 即可。执行 pnpm run commit 唤起 git commit 交互，根据提示完成信息的输入和选择。
Thanks to all the contributors!
① 关注「有来技术」公众号，点击菜单 交流群 获取加群二维码（此举防止广告进群，感谢理解和支持）。
② 直接添加微信 haoxianrui 备注「前端/后端/全栈」。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手