JeeSite Vue3 前端源码
使用 Turborepo、Monorepo、pnpm
快速构建、模块化、代码复用、高效管理

* 使用文档： * 问题反馈：[http://jeesite.net](https://gitee.com/thinkgem/jeesite5/issues/new)  |  [gitcode](https://gitcode.com/thinkgem/jeesite/issues/create/choose)  |  [新手必读](https://gitee.com/thinkgem/jeesite5/issues/I18ARR) * 需求收集： * 联系我们： * 关注微信公众号，了解最新动态：

　　

* QQ 群：`127515876`、`209330483`、`223507718`、`709534275`、`730390092`、`1373527`、`183903863(外包)` * 微信群：如果二维码过期，请尝试点击图片并F5刷新，或者添加客服微信 jeesitex 邀请您进群

　　

* 后端源码仓库地址： [Gitee](https://gitee.com/thinkgem/jeesite5)、 [GitCode](https://gitcode.com/thinkgem/jeesite5)、 [GitHub](https://github.com/thinkgem/jeesite5) * 前端源码仓库地址： [Gitee](https://gitee.com/thinkgem/jeesite-vue)、 [GitCode](https://gitcode.com/thinkgem/jeesite-vue)、 [GitHub](https://github.com/thinkgem/jeesite-vue) * 源码合集仓库地址： [GVP](https://gitee.com/thinkgem/jeesite/tree/main)、 [G-Star](https://gitcode.com/thinkgem/jeesite/tree/main)、 [GitHub](https://github.com/thinkgem/jeesite/tree/main) ## 平台介绍 * JeeSite 快速开发平台，低代码，轻量级，不仅仅是一个后台开发框架，它是一个企业级快速开发解决方案，后端基于经典组合 Spring Boot、Shiro、MyBatis，前端采用分离版 Vue3、Vite、Ant Design Vue、TypeScript、Vben Admin 最先进技术栈，或者 Beetl、Bootstrap、AdminLTE 经典开发模式。 * 提供在线数据源管理、数据表建模、代码生成等功能，可自动创建业务模块代码工程和微服务模块代码工程，自动生成前端代码和后端代码；包括核心功能模块如：组织机构、用户、角色、岗位、管理员、权限审计、菜单及按钮权限、数据权限、模块管理、系统参数、字典管理、系统监控、数据监控等；扩展功能如：工作流引擎、内容管理、消息推送、单点登录、第三方登录、在线作业调度、对象存储、可视化数据大屏、报表设计器、在线文件预览、国际化、全文检索、统一认证服务等。 * 本平台采用松耦合设计，真正的轻量级，微内核，快速部署，插件架构，模块增减便捷，支持扩展 SaaS 架构、集群部署、读写分离、分库分表、Spring Cloud 微服务架构；并内置了众多账号安全设置、密码策略、系统访问限制等安全解决方案，支持等保评测。 * 本平台专注于为初级研发人员提供强大的支持，使他们能够高效、快速地开发出复杂的业务功能，同时为中高级人员腾出宝贵的时间，专注于更具战略性和创新性的任务。我们致力于让开发者能够全心投入业务逻辑中，而将繁琐的技术细节交由平台来封装处理。这不仅降低了技术实现的难度，还确保了系统架构的稳定性和安全性，进而帮助企业节省人力成本、缩短项目周期，并提高整体软件的安全性和质量。 * 2013 年发布以来已被广大爱好者用到了企业、政府、医疗、金融、互联网等各个领域中，拥有：精良架构、易于扩展、大众思维的设计模式，工匠精神，用心打磨每一个细节，深入开发者的内心，并荣获开源中国《最受欢迎中国开源软件》多次奖项，期间也帮助了不少刚毕业的大学生，教师作为入门教材，快速的去实践。 * 2019 年换代升级，我们结合了多年总结和经验，以及各方面的应用案例，对架构完成了一次全部重构，也纳入很多新的思想。不管是从开发者模式、底层架构、逻辑处理还是到用户界面，用户交互体验上都有很大的进步，在不忘学习成本、提高开发效率的情况下，安全方面也做和很多工作，包括：身份认证、密码策略、安全审计、日志收集等众多安全选项供您选择。努力为大中小微企业打造全方位企业级快速开发解决方案。 * 2021 年终发布 Vue3 的前后分离版本，使得 JeeSite 拥有同一个后台服务 Web 来支撑分离版和全栈版两套前端技术栈。 * 对接 OpenAPI、Ollama、DeepSeek 等热门 AI 大模型，凭借检索增强生成 RAG 技术，为企业知识库打造专属智能对话。 * 提供大模型 Tool 本地工具调用及 MCP 服务端和客户端工具调用，助力大模型与您的业务深度融合，实现高效交互。 * 支持国产化软件和硬件环境，如国产芯片、操作系统、数据库、中间件、国密算法等。 ## 核心优势 * JeeSite 非常易于二次开发，可控性强。整体架构清晰、技术栈稳定且先进，源代码规范严谨。所采用的均为业界通用、社区活跃的经典技术，经典技术会的人多、学习成本低、无论是维护还是扩展都十分便捷，系统安全性和稳定性也得到了充分保障。 * JeeSite 功能全面，知识点非常多，也非常少。这看似矛盾，实则源于其“大道至简”的设计理念：功能模块和组件的设计，使用的都是一些通用的技术，通俗直观的设计风格，绝大多数开发者都能轻松掌握，所以只要掌握这些组件用法，即可高效完成业务系统的开发。 * JeeSite 在架构设计、工具调用、操作体验、代码整洁、技术规范以及系统安全等方面投入了大量精力。这些往往属于“隐形投入”——虽然用户未必一眼可见，却对系统的稳定性、可维护性和长期发展至关重要。然而，许多产品更倾向于追求表面光鲜的界面和看似炫目的功能，不愿意在用户看不见的地方投入较多的研发经费，而忽视了这些深层次的基础建设。 * JeeSite 是一个低代码开发平台，具备高度的封装性与出色的扩展能力。这里的“封装”并非限制您的自由，而是在提供开箱即用便捷性的同时，保留了充分的灵活性。当平台暂未覆盖某些特定功能时，JeeSite 会通过清晰的扩展接口和原生调用方式，让您轻松实现自定义需求。 * 许多开发者都在使用 Spring 框架，并学习其优秀的设计理念——尤其是它强大的扩展机制。但试想一下：有多少人真正去修改过 Spring 的源码？即便有人这么做了，一旦框架升级，往往就会陷入兼容性困境，甚至导致系统难以维护。这样的例子屡见不鲜。 * 正因如此，JeeSite 在设计之初就高度重视这一点：我们坚持“不侵入、可扩展”的原则，确保您在享受高效开发的同时，无需担心未来升级带来的麻烦。JeeSite 的扩展能力，正是为了帮您彻底摆脱这类后顾之忧。 * 为什么说 JeeSite 比较易于学习？JeeSite 很好的把握了设计的 “度”，避免过度设计的情况。过度设计是在产品设计过程中忽略了产品和用户的实际需求，反而带来了不必要的复杂性，而忽略了系统的学习、开发和维护成本。 * JeeSite 商业版基于社区版扩展，我们维护一套代码库，有效避免资源浪费和重复造轮子，不仅加速了功能迭代与优化、保障版本稳定性输出，还能快速反哺社区，推动创新与生态共赢，确保项目健康发展；即便您使用社区版，也无需担忧版本停滞及相关衍生问题。 ------ * 至今 JeeSite 平台架构已经非常稳定，我们持续升级，并不失架构的先进性。 * JeeSite 精益求精，用心打磨每一个细节，界面 UI 操作便捷，体验性好。 * JeeSite 是一个专业的平台，是一个可以让您，用着省心的平台。 * 社区版基于 Apache License 2.0 开源协议，永久免费使用。 ### 架构特点及安全方面的优势： ## Vue 前端简介 基于 Vue3、Vite、Ant-Design-Vue、TypeScript 和 Vue Vben Admin 等前沿技术栈构建，本软件采用最先进的技术架构， 帮助初学者快速上手并融入团队开发。内置组织机构、角色用户、菜单授权、数据权限、系统参数等核心模块，结合强大的组件封装 与数据驱动视图设计，为微小、中大型项目提供开箱即用的解决方案和丰富的示例，助力高效开发。 用户界面专为信息化管理后台量身打造，在界面设计上精益求精，每一处细节都彰显着精致，为用户带来优雅且直观的操作体验。 它提供多样化的菜单布局、智能的页签管理、高效的树表操作体验、强大的表格组件、灵活的表单组件设计，具备强大的扩展能力， 同时支持黑暗布局风格，为用户提供高效、灵活且美观的操作体验，满足各类管理后台的复杂需求。 支持 Turborepo + Monorepo 快速构建、模块化、代码复用、支持分包开发， 详见： ## 前端技术特点 定义众多组件，非常贴心的组件属性及小功能，符合 JeeSite 以往的设计思想，列表和表单以数据驱动视图， 极大简化了业务功能开发， 注释分解详见【[源码解析](https://jeesite.com/docs/vue-crud-view)】 为什么做数据驱动视图？前端向下兼容一直是最大的问题，有了一套相应的标准，会对框架升级帮助很大。 比如你可以非常小的成本，业务代码改动非常小的情况下，去升级前端；数据驱动视图可以为未来自定义拖拽表单做更好的铺垫， 数据存储结构更清晰化，更利于维护。 提示：请仔细阅读源码解析，表单视图和列表视图上的注释哦，支持复杂表单以及多表单联合使用。 ## 学习准备 - [VSCode](https://code.visualstudio.com/) - 推荐 IDE 集成开发工具 - [Node.js 20](https://nodejs.org/dist/latest-v20.x/) 和 [git](https://git-scm.com/) - 开发环境 - [Vite](https://vitejs.dev/) - 熟悉 Vite 特性 - [Vue-v3](https://cn.vuejs.org/) - 熟悉 Vue 基础语法 - [TypeScript](https://www.typescriptlang.org/) - 熟悉 TS 基本语法 - [ES6+](http://es6.ruanyifeng.com/) - 熟悉 ES6 基本语法 - [Vue-Router-v4](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用 - [Vue-Vben-Admin](https://jeesite.com/front/vben-admin/) - 熟悉 UI 及表单列表及常用组件使用 - [Ant-Design-Vue](https://antdv.com/components/overview-cn/) - 熟悉 UI 基本使用 ## 快速体验 ### 在线演示 1. 地址： ### 快速运行 1. 环境准备：[Docker](https://www.docker.com) 2. 根据您的操作系统，选择以下对应命令一键拉取 Docker 镜像并启动 JeeSite： * Linux 或 macOS ```sh docker pull crpi-u3zm0t8trv68xpyx.cn-qingdao.personal.cr.aliyuncs.com/thinkgem/jeesite:latest && docker run --name js5 -p 8980:8980 -d -v ~/jeesite-data:/data crpi-u3zm0t8trv68xpyx.cn-qingdao.personal.cr.aliyuncs.com/thinkgem/jeesite:latest && docker logs -f js5 ``` * Windows ```cmd cmd /c "docker pull crpi-u3zm0t8trv68xpyx.cn-qingdao.personal.cr.aliyuncs.com/thinkgem/jeesite:latest && docker run --name js5 -p 8980:8980 -d -v %USERPROFILE%\jeesite-data:/data crpi-u3zm0t8trv68xpyx.cn-qingdao.personal.cr.aliyuncs.com/thinkgem/jeesite:latest && docker logs -f js5" ``` > 容器启动后，系统数据将持久化保存在本地 ~/jeesite-data（Linux/macOS）或 %USERPROFILE%\jeesite-data（Windows）目录中。 3. Vue分离版本地址： 4. 全栈版本地址： 5. 初始登录账号：（管理员）`system`，密码：`admin` ### 本地编译运行 - 如果没有安装 Node.js 20+，下载地址： ```bash # 验证 node -v # 配置国内源 npm config set registry https://registry.npmmirror.com ``` - 如果没有安装 Pnpm 执行安装 ```bash npm i -g pnpm # 验证 pnpm -v # 配置国内源 pnpm config set registry https://registry.npmmirror.com ``` - 获取源代码 ```bash # 注意：不要在带有中文或空格的目录下执行。 git clone https://gitee.com/thinkgem/jeesite-vue.git cd jeesite-vue ``` - 安装依赖 ```bash pnpm install ``` - 开发环境运行访问（方式一） ```bash pnpm dev ``` 开发环境会加载文件较多，便于调试，请耐心等待。 - 编译打包后运行访问（方式二） ```bash pnpm preview ``` 编译打包后，会整合这些文件，所以访问性能会大大提高，生产环境可以开启 gzip - 打包发布程序 ```bash pnpm build ``` 打包完成后，会在根目录生成 dist 文件夹，发布 nginx。 详见文档： ### 安装后端服务 - 安装后台服务 [JeeSite v5.x](https://gitee.com/thinkgem/jeesite5/tree/v5.springboot3/) - 打开 [.env.development](https://jeesite.com/docs/vue-settings/#env-development-详解) 文件，修改后台接口： ```bash # 代理设置，可配置多个，不能换行，格式：[访问接口的根路径, 代理地址, 是否保持Host头] # VITE_PROXY = [["/js","https://vue.jeesite.com/js",true]] VITE_PROXY = [["/js","http://127.0.0.1:8980/js",false]] # 访问接口的根路径（例如：https://vue.jeesite.com）建议为空 VITE_GLOB_API_URL = # 访问接口的前缀，在根路径之后 VITE_GLOB_API_URL_PREFIX = /js ``` ## 常见问题 * Vue 版本的浏览器支持情况：支持所有现代浏览器，Vue3 已不再支持 IE 浏览器。 * 为什么使用抽屉作为表单组件，因为抽屉空间更大，可以展示更多内容，且操作更友好。 * 如何将表单抽屉改为弹窗，替换 list 和 form 页面的 Drawer 为 Modal 即可，V5.6增加了路由表单和弹窗表单的代码生成。 * 打不开代码生成工具怎么办？提示 404，请检查 .env.development 中的代理配置 VITE_PROXY 最后一个参数（是否保持Host头），本地服务 127.0.0.1 应设置为 false，远程服务设置为 true。 * 更多文档详见： **如果需要低版本浏览器支持（如：Chrome 87）** 请打开 .env.production 文件，设置参数后编译： ``` VITE_LEGACY = true ``` ## 如果您使用的 VSCode 的话，推荐安装以下插件： * [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - UnoCSS 提示插件 * [Iconify](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Iconify 图标插件 * [I18n-ally](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally) - i18n 插件 * [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue3 开发必备（Vetur禁用） * [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 脚本代码检查 * [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化 * [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - CSS 格式化 * [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - .env 文件高亮 ## 软件截图 ## 附录 ### 表单视图 ```html ``` ### 列表视图 ```html ``` ## 更多介绍 * 架构特点： * 内置功能： * 目录结构： * 参数配置： * 开发规范： * 数表设计： ## 产品列表 * JeeSite 源码仓库： * JeeSite Vue 前端源码： * JeeSite Cloud 微服务： * JeeSite 跨平台手机端： * JeeSite 客户端安装程序： * 内外网中间件： * 统一认证平台： ## 学习文档 * 库表生成、代码生成： * 菜单权限、按钮权限： * 数据权限、库事务： * 表结构、数据字典： * 持久层框架、SQL： * 后端常用工具： **分离版** * 版本介绍： * 源码解析： * 表单组件： * 表格组件： * 参数配置： * 常用组件： * 前端权限： * 图标组件： * 前端样式库： * 多语言国际化： **经典版** * 表单组件： * 表格组件： * 常用工具： * 自定义主题： ## 更多文档 * AI、CMS、RAG、Tool、MCP 人工智能助手： * BPM 业务流程引擎（Flowable）： * CMS 多站点内容管理模块： * 消息推送消息提醒： * 对象存储模块： * 单点登录模块： * 在线任务调度： * 大屏设计器： * 报表设计器： * 文件管理分享： * 文件在线预览： * 集群、高可用架构： * SaaS 多租户架构： * 读写分离分片分表： * Spring监控系统： * 分布式跨应用事务： * 追踪系统集成： * ELK 日志收集： * MybatisPlus: * 接口快速开发： * 内外网中间件： * 统一认证平台： ## 授权许可协议条款 1. 基于 Apache License Version 2.0 协议发布，可用于商业项目，但必须遵守以下补充条款。 2. 不得将本软件应用于危害国家安全、荣誉和利益的行为，不能以任何形式用于非法为目的的行为。 3. 在使用本软件时，由于它集成了众多第三方开源软件，请共同遵守这些开源软件的使用许可条款规定。 4. 在延伸的代码中（修改和有源代码衍生的代码中）需要带有原来代码中的协议、版权声明和其他原作者 规定需要包含的说明（请尊重原作者的著作权，不要删除或修改文件中的`Copyright`和`@author`信息） 更不要，全局替换源代码中的 jeesite 或 ThinkGem 等字样，否则你将违反本协议条款承担责任。 5. 基于本软件的作品，只能使用 JeeSite5 作为后台服务，除外情况不可商用且不允许二次分发或开源。 6. 您若套用本软件的一些代码或功能参考，请保留源文件中的版权和作者，需要在您的软件介绍明显位置 说明出处，举例：本软件基于 JeeSite Vue 快速开发平台，并附带链接：https://jeesite.com 7. 任何基于本软件而产生的一切法律纠纷和责任，均于我司无关。 8. 如果你对本软件有改进，希望可以贡献给我们，共同进步。 9. 本项目已申请软件著作权，请尊重开源，感谢阅读。 ## 技术支持与服务 * 本软件免费，我们也提供了相应的收费服务，因为： * 没有资金的支撑就很难得到发展，特别是一个好的产品，如果 JeeSite 帮助了您，请为我们点赞。支持我们，您可以获得更多回馈，我们会把公益事业做的更好，开放更多资源，回报社区和社会。请给我们一些动力吧，在此非常感谢已支持我们的朋友！ * **联系我们**：请访问技术支持与服务页面： ## 专业版增加的功能 1. 主题标签页的五种风格自由切换 2. 业务流程、流程设计、流程办理 3. 文件管理、上传秒传、文件预览 4. 高级折叠表单和个性化本地存储 5. 表格个性化设置参数本地存储 6. 租户管理功能、租户切换 7. 动态设置页面字体大小 8. 页签右键，在新窗口打开 9. 消息推送、消息提醒 10. 语言国际化、本地化 11. 快速升级到 Monorepo 脚本 12. 更多功能详见文档