一、简介

JeecgBoot-Vue3采用 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。 是在 Vben-Admin 基础上研发的，适合于JeecgBoot的新版前端VUE3框架。
JeecgBoot-Vue3采用 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。 是在 Vben-Admin 基础上研发的，适合于JeecgBoot的新版前端VUE3框架。

JeecgBoot 是一款基于代码生成器的低代码开发平台！前后端分离架构 SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发! JeecgBoot 引领新的低代码开发模式(OnlineCoding-> 代码生成器-> 手工MERGE)， 帮助解决Java项目70%的重复工作，让开发更多关注业务。既能快速提高效率，节省研发成本，同时又不失灵活性！

JeecgBoot 提供了一系列低代码模块，实现在线开发真正的零代码：Online表单开发、Online报表、报表配置能力、在线图表设计、大屏设计、移动配置能力、表单设计器、在线设计流程、流程自动化配置、插件能力（可插拔）等等！

JEECG宗旨是: 简单功能由OnlineCoding配置实现，做到零代码开发；复杂功能由代码生成器生成进行手工Merge 实现低代码开发，既保证了智能又兼顾灵活；实现了低代码开发的同时又支持灵活编码，解决了当前低代码产品普遍不灵活的弊端！

JEECG业务流程: 采用工作流来实现、扩展出任务接口，供开发编写业务逻辑，表单提供多种解决方案： 表单设计器、online配置表单、编码表单。同时实现了流程与表单的分离设计（松耦合）、并支持任务节点灵活配置，既保证了公司流程的保密性，又减少了开发人员的工作量。

相关地址：

• 在线演示：http://boot3.jeecg.com
• JeecgBoot-Vue3文档：http://vue3.jeecg.com
• Vben文档：https://vvbin.cn/doc-next
• Antd-vue文档： Ant-Design-Vue文档

入门必备：

本项目需要一定前端基础知识，请确保掌握 Vue 的基础知识，以便能处理一些常见的问题。 建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助:

• Vue3 文档
• TypeScript
• Vue-router
• Ant-Design-Vue
• Es6
• Vitejs
• Pinia(vuex替代方案)
• Vue-RFCS
• Vue2 迁移到 3
• WindiCss

项目地址：

	后端源码	vue3前端源码
github	https://github.com/jeecgboot/jeecg-boot	https://github.com/jeecgboot/jeecgboot-vue3
码云	https://gitee.com/jeecg/jeecg-boot	https://gitee.com/jeecg/jeecgboot-vue3

二、项目启动

1.前端模组：jeecgboot-vue3-master

2.后端模组：jeecg-boot-master

项目结构
├─jeecg-boot-parent（父POM： 项目依赖、modules组织）
│  ├─jeecg-boot-base-core（共通模块： 工具类、config、权限、查询过滤器、注解等）
│  ├─jeecg-module-demo    示例代码
│  ├─jeecg-module-system  System系统管理目录
│  │  ├─jeecg-system-biz    System系统管理权限等功能
│  │  ├─jeecg-system-start  System单体启动项目(8080）
│  │  ├─jeecg-system-api    System系统管理模块对外api
│  │  │  ├─jeecg-system-cloud-api   System模块对外提供的微服务接口
│  │  │  ├─jeecg-system-local-api   System模块对外提供的单体接口
│  ├─jeecg-server-cloud           --微服务模块
     ├─jeecg-cloud-gateway       --微服务网关模块(9999)
     ├─jeecg-cloud-nacos       --Nacos服务模块(8848)
     ├─jeecg-system-cloud-start  --System微服务启动项目(7001)
     ├─jeecg-demo-cloud-start    --Demo微服务启动项目(7002)
     ├─jeecg-visual
        ├─jeecg-cloud-monitor       --微服务监控模块 (9111)
        ├─jeecg-cloud-xxljob        --微服务xxljob定时任务服务端 (9080)
        ├─jeecg-cloud-sentinel     --sentinel服务端 (9000)
        ├─jeecg-cloud-test           -- 微服务测试示例（各种例子）
           ├─jeecg-cloud-test-more         -- 微服务测试示例（feign、熔断降级、xxljob、分布式锁）
           ├─jeecg-cloud-test-rabbitmq     -- 微服务测试示例（rabbitmq）
           ├─jeecg-cloud-test-seata          -- 微服务测试示例（seata分布式事务）
           ├─jeecg-cloud-test-shardingsphere    -- 微服务测试示例（分库分表）

3.环境要求：

JDK: 1.8+ (小于11)
Maven: 3.5+
MySql: 5.7+
Redis: 3.2 +
Node Js: 10.0 +
Npm: 5.6.0+
Yarn: 1.21.1+

node,npm我的版本：启动正常

4.数据库准备：

创建数据库：jeecg-boots,如果修改名称要把配置一并修改。

字符集使用utf8,或者utf8mb4都可以，我这里习惯采用utf8mb4。

然后运行sql文件。位置：db/jeecgboot-mysql-5.7.sql。根据自己的数据库自行选择。

如下图在navicat中运行jeecgboot-mysql-5.7.sql文件生成数据库表。

5.前端启动：

软件：webstorm
安装pnpm:
npm install -g pnpm
# 安装依赖
pnpm install
# 运行项目
pnpm dev
访问地址:http://localhost:3100/ 

6.redis启动：

项目需要redis启动不然会报错

7.后端启动：

7.1修改配置：

修改jeecg-boot-master\jeecg-module-system\jeecg-system-start\src\main\resources\application-dev.yml

       datasource:
        master:
          url: jdbc:mysql://127.0.0.1:3306/******?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai
          username: root
          password: *******
          driver-class-name: com.mysql.cj.jdbc.Driver

数据库连接按自己的改。

7.2启动springboot启动类：

启动这个jeecg-boot-master\jeecg-module-system\jeecg-system-start\src\main\java\org\jeecg\JeecgSystemApplication.java

出现文档地址即启动成功。注意：mongodb数据库报错不影响项目运行

8.访问页面：