[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8776":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":38,"discoverSource":39},8776,"vue3-element-admin","youlaitech\u002Fvue3-element-admin","youlaitech","🔥基于 Vue 3 + Vite 7+ TypeScript + element-plus 构建的后台管理前端模板（配套后端源码），vue-element-admin 的 vue3 版本。","https:\u002F\u002Fvue.youlai.tech",null,"Vue",2473,580,20,16,0,2,4,26,7,30.29,"MIT License",false,"master",true,[27,28,29,30,31,32,33,34,5],"element-plus","typescipt","vite","vue","vue-admin","vue-element-admin","vue-router","vue3","2026-06-12 02:01:58","\u003Cdiv align=\"center\">\n  \u003Cimg alt=\"vue3-element-admin\" width=\"80\" height=\"80\" src=\".\u002Fsrc\u002Fassets\u002Fimages\u002Flogo.png\">\n  \u003Ch1>vue3-element-admin\u003C\u002Fh1>\n\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVue-3.5.30-brightgreen.svg\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVite-8.0.0-green.svg\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FElement Plus-2.13.5-blue.svg\"\u002F>\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-green.svg\"\u002F>\n\n  \u003Ca href=\"https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fvue3-element-admin\" target=\"_blank\">\n    \u003Cimg alt=\"有来技术\" src=\"https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fvue3-element-admin\u002Fbadge\u002Fstar.svg\"\u002F>\n   \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyoulaitech\u002Fvue3-element-admin\" target=\"_blank\">\n    \u003Cimg alt=\"有来技术\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fyoulaitech\u002Fvue3-element-admin.svg?style=social&label=Stars\"\u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgitcode.com\u002Fyoulai\u002Fvue3-element-admin\" target=\"_blank\">\n    \u003Cimg alt=\"有来技术\" src=\"https:\u002F\u002Fgitcode.com\u002Fyoulai\u002Fvue3-element-admin\u002Fstar\u002Fbadge.svg\"\u002F>\n  \u003C\u002Fa>\n\n  \u003Ca href=\"https:\u002F\u002Fatomgit.com\u002Fyoulai\u002Fvue3-element-admin\" target=\"_blank\">\n    \u003Cimg alt=\"有来技术\" src=\"https:\u002F\u002Fatomgit.com\u002Fyoulai\u002Fvue3-element-admin\u002Fstar\u002F2025top.svg\"\u002F>\n  \u003C\u002Fa>\n\u003C\u002Fdiv>\n\n![](https:\u002F\u002Fforuda.gitee.com\u002Fimages\u002F1708618984641188532\u002Fa7cca095_716974.png \"rainbow.png\")\n\n\u003Cdiv align=\"center\">\n  \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fvue.youlai.tech\">🖥️ 在线预览\u003C\u002Fa> | \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fapp.youlai.tech\">📲 移动端预览\u003C\u002Fa> |  \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7228990409909108793\">📑 阅读文档\u003C\u002Fa>|  \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fwww.youlai.tech\u002F\u002Fvue3-element-admin\">🌐 官网\u003C\u002Fa> | \u003Ca href=\".\u002FREADME.en-US.md\">💬 English\n\u003C\u002Fdiv>\n\n## 项目简介\n\n[vue3-element-admin](https:\u002F\u002Fgitcode.com\u002Fyoulai\u002Fvue3-element-admin) 基于 Vue3、Vite、TypeScript 和 Element-Plus 搭建的极简开箱即用企业级后台管理前端模板。 配套 Java 后端 [youlai-boot](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fyoulai-boot)、多租户后端 [youlai-boot-tenant](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fyoulai-boot-tenant) 和 Node 后端 [youlai-nest](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fyoulai-nest) 。 提供开发简版[vue3-element-template](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fvue3-element-template) 和 JS 版本[vue3-element-admin-js](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fvue3-element-admin) 供开发者快速开发。\n\n## 项目特色\n\n- **简洁易用**：基于 [vue-element-admin](https:\u002F\u002Fgitee.com\u002Fpanjiachen\u002Fvue-element-admin) 升级的 Vue3 版本，无过渡封装 ，易上手。\n- **数据交互**： 支持 `Mock` 数据和[线上接口文档](https:\u002F\u002Fwww.apifox.cn\u002Fapidoc\u002Fshared-195e783f-4d85-4235-a038-eec696de4ea5)，并提供配套的 [Java](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fyoulai-boot) 和 [Node](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fyoulai-nest) 后端源码。\n\n- **系统功能：** 提供用户管理、角色管理、菜单管理、部门管理、字典管理、系统配置、通知公告等功能模块。\n- **权限管理：** 支持动态路由、按钮权限、角色权限和数据权限等多种权限管理方式。\n\n- **多租户：** 支持多租户模式与租户隔离。\n\n- **基础设施：** 提供国际化、多布局、暗黑模式、全屏、水印、接口文档和代码生成器等功能。\n- **持续更新**：项目持续开源更新，实时更新工具和依赖。\n\n## 项目截图\n\n🖥️ **控制台**\n\n![](https:\u002F\u002Fwww.youlai.tech\u002Fstorage\u002Fblog\u002F2025\u002F04\u002F30\u002F20250430085342.png)\n\n⚡**接口文档**\n\n![](https:\u002F\u002Fwww.youlai.tech\u002Fstorage\u002Fblog\u002F2025\u002F01\u002F18\u002F20250118183539.png)\n\n📲 **移动端**\n\n![](https:\u002F\u002Fwww.youlai.tech\u002Fstorage\u002Fblog\u002F2025\u002F04\u002F30\u002Fapp.jpg)\n\n## 项目源码\n\n| 项目                      | Gitee                                                                      | Github                                                                       | GitCode                                                                   |\n| ------------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| vue3-element-admin ✅     | [vue3-element-admin](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fvue3-element-admin)       | [vue3-element-admin](https:\u002F\u002Fgithub.com\u002Fyoulaitech\u002Fvue3-element-admin)       | [vue3-element-admin](https:\u002F\u002Fgitcode.com\u002Fyoulai\u002Fvue3-element-admin)       |\n| vue3-element-admin JS版   | [vue3-element-admin-js](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fvue3-element-admin-js) | [vue3-element-admin-js](https:\u002F\u002Fgithub.com\u002Fyoulaitech\u002Fvue3-element-admin-js) | [vue3-element-admin-js](https:\u002F\u002Fgitcode.com\u002Fyoulai\u002Fvue3-element-admin-js) |\n| vue3-element-admin 精简版 | [vue3-element-template](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fvue3-element-template) | [vue3-element-template](https:\u002F\u002Fgithub.com\u002Fyoulaitech\u002Fvue3-element-template) | [vue3-element-template](https:\u002F\u002Fgitcode.com\u002Fyoulai\u002Fvue3-element-template) |\n| vue-uniapp-admin 移动版   | [vue-uniapp-admin](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fvue-uniapp-admin)           | [vue-uniapp-admin](https:\u002F\u002Fgithub.com\u002Fyoulaitech\u002Fvue-uniapp-admin)           | [vue-uniapp-admin](https:\u002F\u002Fgitcode.com\u002Fyoulai\u002Fvue-uniapp-admin)           |\n| Java 后端                 | [youlai-boot](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fyoulai-boot)                     | [youlai-boot](https:\u002F\u002Fgithub.com\u002Fhaoxianrui\u002Fyoulai-boot.git)                 | [youlai-boot](https:\u002F\u002Fgitcode.com\u002Fyoulai\u002Fyoulai-boot.git)                 |\n| Java 多租户后端           | [youlai-boot-tenant](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fyoulai-boot-tenant)       | -                                                                            | -                                                                         |\n| Node 后端                 | [youlai-nest](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fyoulai-nest)                     | [youlai-nest](https:\u002F\u002Fgithub.com\u002Fhaoxianrui\u002Fyoulai-nest.git)                 | [youlai-nest](https:\u002F\u002Fgitcode.com\u002Fyoulai\u002Fyoulai-nest.git)                 |\n\n## 开发指南\n\n| 名称     | 地址                                                                                                                               |\n| -------- | ---------------------------------------------------------------------------------------------------------------------------------- |\n| 视频教程 | [https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1eFUuYyEFj](https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1eFUuYyEFj)                                         |\n| 项目搭建 | [基于 Vue3 + Vite + TypeScript + Element-Plus 从0到1搭建后台管理系统](https:\u002F\u002Fblog.csdn.net\u002Fu013737132\u002Farticle\u002Fdetails\u002F130191394)  |\n| 官方文档 | [https:\u002F\u002Fwww.youlai.tech\u002Fvue3-element-admin](https:\u002F\u002Fwww.youlai.tech\u002Fvue3-element-admin\u002F)                                          |\n| 代码规范 | [ESLint V9 + Prettier + Stylelint + EditorConfig 约束和统一前端代码规范](https:\u002F\u002Fyoulai.blog.csdn.net\u002Farticle\u002Fdetails\u002F145608723)   |\n| 提交规范 | [Husky + Lint-staged + Commitlint + Commitizen + cz-git 配置 Git 提交规范](https:\u002F\u002Fyoulai.blog.csdn.net\u002Farticle\u002Fdetails\u002F145615236) |\n| 接口文档 | [https:\u002F\u002Fwww.apifox.cn](https:\u002F\u002Fwww.apifox.cn\u002Fapidoc\u002Fshared-195e783f-4d85-4235-a038-eec696de4ea5)                                  |\n\n## 项目启动\n\n- **环境准备**\n\n| 环境类型     | 版本要求                                                     | 备注                              |\n| ------------ | ------------------------------------------------------------ | --------------------------------- |\n| **Node.js**  | `^20.19.0` 或 `>=22.12.0`                                    | 推荐使用 LTS 版本（主版本为偶数） |\n| **包管理器** | `pnpm >= 8.0.0`                                              | 项目使用 pnpm 作为包管理器        |\n| **开发工具** | [Visual Studio Code](https:\u002F\u002Fcode.visualstudio.com\u002FDownload) | 推荐安装 Vue、TypeScript 相关插件 |\n\n- **快速开始**\n\n```bash\n# 克隆代码\ngit clone https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fvue3-element-admin.git\n\n# 切换目录\ncd vue3-element-admin\n\n# 安装 pnpm\nnpm install pnpm -g\n\n# 设置镜像源(可忽略)\npnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\n\n# 安装依赖\npnpm install\n\n# 启动运行\npnpm run dev\n```\n\n## 项目部署\n\n执行 `pnpm run build` 命令后，项目将被打包并生成 `dist` 目录。接下来，将 `dist` 目录下的文件上传到服务器 `\u002Fusr\u002Fshare\u002Fnginx\u002Fhtml` 目录下，并配置 Nginx 进行反向代理。\n\n```bash\npnpm run build\n```\n\n以下是 Nginx 的配置示例：\n\n```nginx\nserver {\n    listen      80;\n    server_name localhost;\n\n    location \u002F {\n        root   \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml;\n        index  index.html index.htm;\n    }\n\n    # 反向代理配置\n    location \u002Fprod-api\u002F {\n        # 请将 api.youlai.tech 替换为您的后端 API 地址，并注意保留后面的斜杠 \u002F\n        proxy_pass http:\u002F\u002Fapi.youlai.tech\u002F;\n    }\n}\n```\n\n更多详细信息，请参考这篇文章：[Nginx 安装和配置](https:\u002F\u002Fblog.csdn.net\u002Fu013737132\u002Farticle\u002Fdetails\u002F145667694)。\n\n## 本地Mock\n\n项目同时支持在线和本地 Mock 接口，默认使用线上接口，如需替换为 Mock 接口，修改文件 `.env.development` 的 `VITE_MOCK_DEV_SERVER` 为 `true` **即可**。\n\n## 后端接口\n\n> 如果您具备Java开发基础，按照以下步骤将在线接口转为本地后端接口，创建企业级前后端分离开发环境，助您走向全栈之路。\n\n1. 获取基于 `Java` 和 `SpringBoot` 开发的后端 [youlai-boot](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fyoulai-boot.git) 源码。\n2. 根据后端工程的说明文档 [README.md](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fyoulai-boot#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C) 完成本地启动。\n3. 修改 `.env.development` 文件中的 `VITE_APP_API_URL` 的值，将其从 https:\u002F\u002Fapi.youlai.tech 更改为 http:\u002F\u002Flocalhost:8989 即可。\n\n## 注意事项\n\n- **自动导入插件自动生成默认关闭**\n\n  模板项目的组件类型声明已自动生成。如果添加和使用新的组件，请按照图示方法开启自动生成。在自动生成完成后，记得将其设置为 `false`，避免重复执行引发冲突。\n\n  ![](https:\u002F\u002Fforuda.gitee.com\u002Fimages\u002F1687755823137387608\u002F412ea803_716974.png)\n\n- **项目启动浏览器访问空白**\n\n  请升级浏览器尝试，低版本浏览器内核可能不支持某些新的 JavaScript 语法，比如可选链操作符 `?.`。\n\n- **项目同步仓库更新升级**\n\n  项目同步仓库更新升级之后，建议 `pnpm install` 安装更新依赖之后启动 。\n\n- **项目组件、函数和引用爆红**\n\n  重启 VSCode 尝试\n\n- **其他问题**\n\n  如果有其他问题或者建议，建议 [ISSUE](https:\u002F\u002Fgitee.com\u002Fyoulaiorg\u002Fvue3-element-admin\u002Fissues\u002Fnew)\n\n## 提交规范\n\n执行 `pnpm run commit` 唤起 git commit 交互，根据提示完成信息的输入和选择。\n\n![](https:\u002F\u002Fforuda.gitee.com\u002Fimages\u002F1687755823165218215\u002Fc1705416_716974.png)\n\n## 项目统计\n\n![](https:\u002F\u002Frepobeats.axiom.co\u002Fapi\u002Fembed\u002Faa7cca3d6fa9c308fc659fa6e09af9a1910506c3.svg \"Repobeats analytics image\")\n\nThanks to all the contributors!\n感谢所有的贡献者！\n\n[![contributors](https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=youlaitech\u002Fvue3-element-admin)](https:\u002F\u002Fgithub.com\u002Fyoulaitech\u002Fvue3-element-admin\u002Fgraphs\u002Fcontributors)\n\n## 特别感谢\n\n- 感谢 [GitCode](https:\u002F\u002Fgitcode.com\u002F) 官方的 [G-Star](https:\u002F\u002Fgitcode.com\u002Fg-star) 认证\n  ![](https:\u002F\u002Fforuda.gitee.com\u002Fimages\u002F1728577513089814203\u002F95f2a70d_716974.jpeg)\n\n## 加群交流\n\n① 关注「有来技术」公众号，点击菜单 **交流群** 获取加群二维码（此举防止广告进群，感谢理解和支持）。\n\n② 直接添加微信 **`haoxianrui`** 备注「前端\u002F后端\u002F全栈」。\n\n![有来技术公众号](https:\u002F\u002Fforuda.gitee.com\u002Fimages\u002F1737108820762592766\u002F3390ed0d_716974.png)\n","vue3-element-admin 是一个基于 Vue 3、Vite、TypeScript 和 Element Plus 构建的后台管理前端模板，适用于企业级应用开发。该项目提供了一系列核心功能，包括用户管理、角色管理、菜单管理和权限控制等，并支持多租户模式和动态路由配置，确保了系统的灵活性与安全性。此外，它还集成了国际化、暗黑模式、全屏显示和水印等功能，以提升用户体验。配套提供了 Java 和 Node.js 的后端源码，便于开发者快速搭建完整的前后端解决方案。此项目特别适合需要快速开发并部署现代化Web管理界面的企业或团队使用。","2026-06-11 03:19:41","top_language"]