# JeeSite Vue3
**Repository Path**: thinkgem/jeesite-vue
## Basic Information
- **Project Name**: JeeSite Vue3
- **Description**: 👍基于 Vue 3、Vite、Ant Design Vue 4.0、TypeScript、Vben Vue Admin,最先进的技术栈,让初学者能够更快的入门并投入到团队开发中去。包括模块如:组织机构、角色用户、菜单授权、数据权限、系统参数等。完整组件封装,数据驱动视图。为微小中大项目的开发,提供现成的开箱解决方案及丰富的示例。Vue端完全开源。无用户限制。😘动态看 next 分支。
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: http://vue.jeesite.com
- **GVP Project**: No
## Statistics
- **Stars**: 14665
- **Forks**: 661
- **Created**: 2021-12-16
- **Last Updated**: 2025-06-12
## Categories & Tags
**Categories**: backend
**Tags**: Vue, vue3, TypeScript, Ant-Design, Java
## README
JeeSite Vue3 前端源码
使用 Turborepo、Monorepo、pnpm
快速构建、模块化、代码复用、高效管理
------
如果你喜欢 JeeSite,请给她一个 ⭐️ Star,您的支持将是我们前行的动力。
------
1. 单仓多包 pnpm + Turborepo 涡轮增压,提升编译速度,方便统一管理脚本任务
2. 按功能模块进行拆分为不同的包,方便进行团队开发源码管理,可根据需要进行发包
3. 模块之间松耦合,单依赖,公共模块,公共组件,公共工具,方便代码复用
4. 可方便从传统架构版本,升级到 Monorepo 模块化、分包架构
## 技术交流
* 官方网站:
* 使用文档:
* 问题反馈:[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/overview?ref=main)、
[GitHub](https://github.com/thinkgem/jeesite/tree/main)
## 平台介绍
* JeeSite 快速开发平台,低代码,轻量级,不仅仅是一个后台开发框架,它是一个企业级快速开发解决方案,后端基于经典组合 Spring Boot、Shiro、MyBatis,前端采用分离版 Vue3、Vite、Monorepo、Ant Design Vue、TypeScript、Vben Admin 最先进技术栈,或者 Beetl、Bootstrap、AdminLTE 经典开发模式。
* 提供在线数据源管理、数据表建模、代码生成等功能,可自动创建业务模块代码工程和微服务模块代码工程,自动生成前端代码和后端代码;包括核心功能模块如:组织机构、用户、角色、岗位、管理员、权限审计、菜单及按钮权限、数据权限、模块管理、系统参数、字典管理、系统监控、数据监控等;扩展功能如:工作流引擎、内容管理、消息推送、单点登录、第三方登录、在线作业调度、对象存储、可视化数据大屏、报表设计器、在线文件预览、国际化、全文检索、统一认证服务等。
* 本平台采用松耦合设计,真正的轻量级,微内核,快速部署,插件架构,模块增减便捷,支持扩展 SaaS 架构、集群部署、读写分离、分库分表、Spring Cloud 微服务架构;并内置了众多账号安全设置、密码策略、系统访问限制等安全解决方案,支持等保评测。
* 本平台专注于为初级研发人员提供强大的支持,使他们能够高效、快速地开发出复杂的业务功能,同时为中高级人员腾出宝贵的时间,专注于更具战略性和创新性的任务。我们致力于让开发者能够全心投入业务逻辑中,而将繁琐的技术细节交由平台来封装处理。这不仅降低了技术实现的难度,还确保了系统架构的稳定性和安全性,进而帮助企业节省人力成本、缩短项目周期,并提高整体软件的安全性和质量。
* 2013 年发布以来已被广大爱好者用到了企业、政府、医疗、金融、互联网等各个领域中,拥有:精良架构、易于扩展、大众思维的设计模式,工匠精神,用心打磨每一个细节,深入开发者的内心,并荣获开源中国《最受欢迎中国开源软件》多次奖项,期间也帮助了不少刚毕业的大学生,教师作为入门教材,快速的去实践。
* 2019 年换代升级,我们结合了多年总结和经验,以及各方面的应用案例,对架构完成了一次全部重构,也纳入很多新的思想。不管是从开发者模式、底层架构、逻辑处理还是到用户界面,用户交互体验上都有很大的进步,在不忘学习成本、提高开发效率的情况下,安全方面也做和很多工作,包括:身份认证、密码策略、安全审计、日志收集等众多安全选项供您选择。努力为大中小微企业打造全方位企业级快速开发解决方案。
* 2021 年终发布 Vue3 的前后分离版本,使得 JeeSite 拥有同一个后台服务 Web 来支撑分离版和全栈版两套前端技术栈。
* 对接常见 AI 大模型(OpenAPI、Ollama、DeepSeek等),支持检索增强生成 RAG 技术,实现企业知识库智能对话。
* 支持国产化软硬件环境,如国产芯片、操作系统、数据库、中间件、国密算法等。
## 核心优势
* JeeSite 非常易于二次开发,可控性高,整体架构清晰、技术稳定而先进、源代码书写规范、经典技术会的人多、易于维护、易于扩展、安全稳定。
* JeeSite 功能全,知识点非常多,也非常少。因为她使用的都是一些通用的技术,通俗的设计风格,大多数基础知识点,多数人都能掌握,所以每一个 JeeSite 的功能点都非常容易掌握。只要您学会使用这些功能和组件的应用,就可以顺利地完成系统开发了。
* JeeSite 是一个低代码开发平台,具有较高的封装度、扩展性,封装不是限制您去做一些事情,而是在便捷的同时,也具有较好的扩展性,在不具备一些功能的情况下,JeeSite 提供了扩展接口,提供了原生调用方法。
* 大家都在用 Spring,也在学习 Spring 的优点,Spring 提供了较好的扩展性,可又有多少人去修改它的源代码呢,退一步说,大家去修改了 Spring 的源码,反而会对未来升级造成很大困扰,您说不是呢?这样的例子很多,所以不要纠结,我们非常注重这一点,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)】
为什么做数据驱动视图?前端向下兼容一直是最大的问题,有了一套相应的标准,会对框架升级帮助很大。
比如你可以非常小的成本,业务代码改动非常小的情况下,去升级前端;数据驱动视图可以为未来自定义拖拽表单做更好的铺垫,
数据存储结构更清晰化,更利于维护。
提示:请仔细阅读源码解析,表单视图和列表视图上的注释哦,复杂表单可以多表单联合使用。
## 演示地址
1. 地址:
## 学习准备
- [VSCode](https://code.visualstudio.com/) - 推荐 IDE 集成开发工具
- [Node.js 18](https://nodejs.org/dist/latest-v18.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 基本使用
## 安装使用
- 如果没有安装 Node.js 18+,下载地址:
```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
```
### 如果您使用的 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 文件高亮
## 常见问题
* Vue 版本的浏览器支持情况:支持所有现代浏览器,Vue3 已不再支持 IE 浏览器。
* 为什么使用抽屉作为表单组件,因为抽屉空间更大,可以展示更多内容,且操作更友好。
* 如何将表单抽屉改为弹窗,替换 list 和 form 页面的 Drawer 为 Modal 即可,V5.6增加了路由表单和弹窗表单的代码生成。
* 打不开代码生成工具怎么办?提示 404,请检查 .env.development 中的代理配置 VITE_PROXY 最后一个参数(是否保持Host头),本地服务 127.0.0.1 应设置为 false,远程服务设置为 true。
## 软件截图
## 附录
### 表单视图
```html
-- 图标
{{ getTitle.value }} -- 标题名称
{{ t('新增') }}
```
### 列表视图
```html
```
## 授权许可协议条款
1. 基于 Apache License Version 2.0 协议发布,可用于商业项目,但必须遵守以下补充条款。
2. 不得将本软件应用于危害国家安全、荣誉和利益的行为,不能以任何形式用于非法为目的的行为。
3. 在使用本软件时,由于它集成了众多第三方开源软件,请共同遵守这些开源软件的使用许可条款规定。
4. 在延伸的代码中(修改和有源代码衍生的代码中)需要带有原来代码中的协议、版权声明和其他原作者
规定需要包含的说明(请尊重原作者的著作权,不要删除或修改文件中的`Copyright`和`@author`信息)
更不要,全局替换源代码中的 jeesite 或 ThinkGem 等字样,否则你将违反本协议条款承担责任。
5. 基于本软件的作品,只能使用 JeeSite5 作为后台服务,除外情况不可商用且不允许二次分发或开源。
6. 您若套用本软件的一些代码或功能参考,请保留源文件中的版权和作者,需要在您的软件介绍明显位置
说明出处,举例:本软件基于 JeeSite Vue 快速开发平台,并附带链接:http://jeesite.com
7. 任何基于本软件而产生的一切法律纠纷和责任,均于我司无关。
8. 如果你对本软件有改进,希望可以贡献给我们,共同进步。
9. 本项目已申请软件著作权,请尊重开源,感谢阅读。
## 技术支持与服务
* 本软件免费,我们也提供了相应的收费服务,因为:
* 没有资金的支撑就很难得到发展,特别是一个好的产品,如果 JeeSite 帮助了您,请为我们点赞。支持我们,您可以获得更多回馈,我们会把公益事业做的更好,开放更多资源,回报社区和社会。请给我们一些动力吧,在此非常感谢已支持我们的朋友!
* **联系我们**:请访问技术支持与服务页面:
## 专业版增加的功能
1. 主题标签页的三种风格自由切换
2. 业务流程、流程设计、流程办理
3. 文件管理、上传秒传、文件预览
4. 高级折叠表单和个性化本地存储
5. 表格个性化设置参数本地存储
6. 租户管理功能、租户切换
7. 动态设置页面字体大小
8. 页签右键,在新窗口打开
9. 消息推送、消息提醒
10. 语言国际化、本地化
11. 快速升级到 Monorepo 脚本
12. 更多功能详见文档