JeecgBoot-Vue3：基于Vue3的低代码开发平台的新篇章

摘要


随着前端技术的不断发展，Vue3.0、TypeScript、Vite以及Ant Design Vue等新技术方案的涌现，为低代码开发平台带来了全新的可能性。JeecgBoot-Vue3作为JeecgBoot低代码平台的全新UI版本，采用Vue3技术栈，结合上述先进技术，为企业级应用开发带来了更加高效、灵活的开发体验。本文将深入解析JeecgBoot-Vue3的核心技术、功能特点以及其对低代码开发领域的影响。

一、引言

随着数字化转型的加速，企业对软件开发的需求日益增长。如何在保证开发效率的同时，确保系统的灵活性和可扩展性，成为了业界关注的焦点。JeecgBoot-Vue3作为JeecgBoot低代码平台的全新UI版本，通过引入Vue3.0、TypeScript、Vite等新技术，为低代码开发领域注入了新的活力。

二、JeecgBoot-Vue3项目介绍

JeecgBoot—Vue3版前端源码，采用Vue3.0+TypeScript+Vite+Ant-Design-Vue等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。是JeecgBoot低代码平台的vue3技术栈的全新UI版本，功能强于vue2版。

简介

JeecgBoot-Vue3采用 Vue3.0、Vite、 Ant-Design-Vue4、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。是采用Vben实现的 JeecgBoot低代码平台的全新vue3版本。

强大的代码生成器让前后端代码一键生成! JeecgBoot引领低代码开发模式(OnlineCoding-> 代码生成-> 手工MERGE)， 帮助解决Java项目70%的重复工作，让开发更多关注业务。既能快速提高效率，节省成本，同时又不失灵活性

技术支持

关闭Gitee的issue通道，使用中遇到问题或者BUG可以在 Github上提Issues

官方支持：http://jeecg.com/doc/help

源码下载

  • 后台源码 ：https://github.com/jeecgboot/jeecg-boot

  • 前端源码 ：https://github.com/jeecgboot/jeecgboot-vue3

项目说明
项目名说明
jeecgboot-vue3前端源码Vue3版下载
jeecg-boot后端JAVA源码下载（SpringBoot+SpringCloud）

开发环境搭建

  • 前端开发环境准备

  • 前端项目快速启动

  • 通过IDEA启动项目

技术文档

  • 官方文档：https://help.jeecg.com

  • 官方网站：https://www.jeecg.com

  • 快速入门：快速入门 | 常见问题 | 视频教程 | 代码生成

  • QQ交流群：⑧825232878、⑦791696430(满)、683903138(满)

  • 在线演示 ：Vue3演示 | APP演示| 敲敲云零代码

演示系统的登录账号密码，请点击 获取账号密码 获取

安装与使用

环境要求: 版本要求Node 14.18+ / 16+ 版本以上，不再支持 Node 12 / 13 / 15。建议使用pnpm，如果使用yarn,请用Yarn1.x版本，否则依赖可能安装不上。

  • Get the project code

git clone https://github.com/jeecgboot/jeecgboot-vue3.git

  • Installation dependencies

cd jeecgboot-vue3pnpm install

  • 配置接口地址 .env.development

VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
VITE_GLOB_DOMAIN_URL=http://localhost:8080/jeecg-boot

说明：把http://localhost:8080/jeecg-boot 换成自己地址，其他不用改。

  • run

pnpm serve

  • build

pnpm build

Docker镜像启动前端(单体模式)

  • host设置

注意：需要把127.0.0.1替换成真实IP 比如192.开头,不然后端不通。

127.0.0.1 jeecg-boot-system
127.0.0.1 jeecg-boot-gateway

  • 下载项目

git clone https://github.com/jeecgboot/jeecgboot-vue3.gitcd jeecgboot-vue3

  • 配置接口域名 .env.production

VITE_GLOB_API_URL=/jeecgboot
VITE_GLOB_DOMAIN_URL=http://jeecg-boot-system:8080/jeecg-boot

后台单体启动 见此文档

  • 编译项目

pnpm installpnpm build

  • 启动容器

docker build -t jeecgboot-vue3 .
docker run --name jeecgboot-vue3-nginx -p 80:80 -d jeecgboot-vue3

  • 访问前台

http://localhost

Docker镜像启动前端(微服务模式)

这里只写与单体的区别步骤

  • 区别1. 修改后台域名 .env.production

VITE_GLOB_API_URL=/jeecgboot
VITE_GLOB_DOMAIN_URL=http://jeecg-boot-gateway:9999

后台微服务启动 见此文档

  • 区别2. 修改Dockerfile文件

- 把`http://jeecg-boot-system:8080/jeecg-boot`替换成 `http://jeecg-boot-gateway:9999`
- 把`jeecg-boot-system`替换成 `jeecg-boot-gateway`

  • 其他与单体模式一样

镜像需要重现构建，最好把单体的镜像删掉，重新构建docker镜像。

入门必备

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

  • JeecgBoot-Vue3文档

  • Vue3 文档

  • Vben文档

  • Ant-Design-Vue

  • TypeScript

  • Vue-router

  • Es6

  • Vitejs

  • Pinia(vuex替代方案)

  • Vue-RFCS

  • Vue2 迁移到 3

  • vxetable文档

  • WindiCss

浏览器支持

本地开发推荐使用Chrome 最新版浏览器，不支持Chrome 90以下版本。

生产环境支持现代浏览器，不支持 IE。

功能模块

vue3版本已经实现了系统管理、系统监控、报表、各种组件、前端权限、GUI代码生成、Online表单、Online报表等平台功能，完全可以用于生产环境。

├─首页
│  ├─首页（四套首页满足不同场景需求）
│  ├─工作台
├─系统管理
│  ├─用户管理
│  ├─角色管理
│  ├─菜单管理
│  ├─权限设置（支持按钮权限、数据权限）
│  ├─表单权限（控制字段禁用、隐藏）
│  ├─部门管理
│  ├─我的部门（二级管理员）
│  └─字典管理
│  └─分类字典
│  └─系统公告
│  └─职务管理
│  └─通讯录
│  └─对象存储
│  └─多租户管理
├─系统监控
│  ├─网关路由配置（gateway）
│  ├─定时任务
│  ├─数据源管理
│  ├─系统日志
│  ├─消息中心（支持短信、邮件、微信推送等等）
│  ├─数据日志（记录数据快照，可对比快照，查看数据变更情况）
│  ├─系统通知
│  ├─SQL监控
│  ├─性能监控
│  │  ├─监控 Redis
│  │  ├─Tomcat
│  │  ├─jvm
│  │  ├─服务器信息
│  │  ├─请求追踪
│  │  ├─磁盘监控
├─消息中心
│  ├─我的消息
│  ├─消息管理
│  ├─模板管理
├─积木报表设计器
│─报表示例
│  ├─曲线图
│  └─饼状图
│  └─柱状图
│  └─折线图
│  └─面积图
│  └─雷达图
│  └─仪表图
│  └─进度条
│  └─排名列表
│  └─等等
│─大屏模板
│  ├─作战指挥中心大屏
│  └─物流服务中心大屏
├─代码生成器（GUI）
│  ├─代码生成器功能（一键生成前后端代码，生成后无需修改直接用，绝对是后端开发福音）
│  ├─代码生成器模板（提供4套模板，分别支持单表和一对多模型，不同风格选择）
│  ├─代码生成器模板（生成代码，自带excel导入导出）
│  ├─查询过滤器（查询逻辑无需编码，系统根据页面配置自动生成）
│  ├─高级查询器（弹窗自动组合查询条件）
│  ├─Excel导入导出工具集成（支持单表，一对多 导入导出）
│  ├─平台移动自适应支持
│─常用示例
│  ├─自定义组件示例
│  ├─JVxeTable示例(ERP行业复杂排版效果)
│  ├─单表模型例子
│  └─一对多模型例子
│  └─打印例子
│  └─一对多内嵌示例
│  └─异步树Table
│  └─图片拖拽排序
│  └─图片翻页
│  └─图片预览
│  └─PDF预览
│─封装通用组件 
│  ├─行编辑表格JVxeTable
│  └─省略显示组件
│  └─时间控件
│  └─高级查询 (未实现)
│  └─用户选择组件
│  └─报表组件封装
│  └─字典组件
│  └─下拉多选组件
│  └─选人组件
│  └─选部门组件
│  └─通过部门选人组件
│  └─封装曲线、柱状图、饼状图、折线图等等报表的组件（经过封装，使用简单）
│  └─在线code编辑器
│  └─上传文件组件
│  └─树列表组件
│  └─表单禁用组件
│  └─等等
│─更多页面模板
│  └─Mock示例（子菜单很多）
│  └─页面&导航（子菜单很多）
│  └─组件&功能（子菜单很多）
├─高级功能
│  ├─支持微前端
│  ├─提供CAS单点登录
│  ├─集成Websocket消息通知机制
│  ├─支持第三方登录（QQ、钉钉、微信等）
│  ├─系统编码规则
├─Online在线开发(低代码)
│  ├─Online在线表单 - 功能已开放
│  ├─Online代码生成器 - 功能已开放
│  ├─Online在线报表 - 功能已开放
│  ├─Online在线图表(暂未开源)
│  ├─多数据源管理
│─流程模块功能 (暂未开源)
│  ├─流程设计器
│  ├─表单设计器
│  ├─大屏设计器
│  ├─门户设计/仪表盘设计器
│  └─我的任务
│  └─历史流程
│  └─历史流程
│  └─流程实例管理
│  └─流程监听管理
│  └─流程表达式
│  └─我发起的流程
│  └─我的抄送
│  └─流程委派、抄送、跳转
│  └─OA办公组件
└─其他模块 └─更多功能开发中。。

系统效果

系统后台

图片

图片

图片

图片

图片

Online开发&代码生成 

图片

图片

图片

图片

系统交互 

图片

图片

流程设计 

图片

图片

图片

图片

简版流程设计

图片

图片

图片

仪表盘设计器 

图片

图片

报表设计器 

图片

图片

图片

图片

表单设计器 

图片

图片

图片

大屏设计器 

图片

图片

图片

图片

报表效果

图片

图片

图片

图片

图片

接口文档

图片

手机端 

图片

 

图片

PAD端 

图片

 

图片

 

图片

JeecgBoot-Vue3的核心技术主要体现在以下几个方面：

  1. Vue3.0：作为前端领域的新星，Vue3.0在性能、可维护性和扩展性方面都有显著提升。JeecgBoot-Vue3采用Vue3.0作为前端框架，为开发者提供了更加高效、简洁的开发体验。

  2. TypeScript：作为一种静态类型检查的JavaScript超集，TypeScript增强了代码的可读性和可维护性，提高了开发效率和代码质量。在JeecgBoot-Vue3中，TypeScript的使用进一步保障了代码的健壮性和稳定性。

  3. Vite：作为一种现代化的前端构建工具，Vite通过原生ESM和高效的文件系统操作，实现了极快的启动速度和构建速度。JeecgBoot-Vue3采用Vite作为构建工具，大大提高了开发效率和构建效率。

  4. Ant Design Vue：作为一套企业级的中后台前端/设计解决方案，Ant Design Vue为开发者提供了丰富的组件和灵活的设计方案。JeecgBoot-Vue3采用Ant Design Vue作为UI库，为开发者提供了更加美观、易用的界面。

三、JeecgBoot-Vue3的功能特点

JeecgBoot-Vue3的功能特点主要体现在以下几个方面：

  1. 二次封装组件：JeecgBoot-Vue3对Ant Design Vue的组件进行了二次封装，提供了更加符合业务需求的组件库，简化了开发者的开发工作。

  2. utils和hooks：JeecgBoot-Vue3提供了一系列实用的utils和hooks，帮助开发者快速实现常见功能，提高了开发效率。

  3. 动态菜单：JeecgBoot-Vue3支持动态生成菜单，根据用户的角色和权限动态展示菜单项，提高了系统的安全性和灵活性。

  4. 权限校验和按钮级别权限控制：JeecgBoot-Vue3提供了细粒度的权限校验和按钮级别权限控制功能，确保了系统的安全性和稳定性。

四、JeecgBoot-Vue3的影响

JeecgBoot-Vue3的推出为低代码开发领域带来了全新的可能性。其采用Vue3技术栈和一系列新技术方案，为企业级应用开发提供了更加高效、灵活的开发体验。同时，JeecgBoot-Vue3的功能特点也进一步提升了低代码开发平台的能力，推动了低代码开发领域的发展。

五、结论

JeecgBoot-Vue3作为JeecgBoot低代码平台的全新UI版本，通过引入Vue3.0、TypeScript、Vite等新技术方案，为企业级应用开发带来了更加高效、灵活的开发体验。其强大的代码生成器、动态菜单、权限校验等功能特点进一步提升了低代码开发平台的能力。我们有理由相信，随着JeecgBoot-Vue3的不断发展和完善，低代码开发领域将迎来更加美好的明天。

项目下载地址：

https://gitee.com/jeecg/jeecgboot-vue3

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/19957.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

VBA代码解决方案第十四讲 如何利用VBA检查单元格中是否含有公式

VBA代码解决方案第十四讲 如何利用VBA检查单元格中是否含有公式

《VBA代码解决方案》(版权10028096)这套教程是我最早推出的教程，目前已经是第三版修订了。这套教程定位于入门后的提高，在学习这套教程过程中，侧重点是要理解及掌握我的“积木编程”思想。要灵活运用教程中的实例像搭积木一样把自己喜欢的代码…
阅读更多...
解决bind error: Address already in use

解决bind error: Address already in use

是端口复用问题 产生原因 程序突然退出系统但是没有释放端口 问题解决 首先通过 //显示进程信息 ps -la //杀死相关进程 kill -9 xxxx然后添加socket设置 int on1; if(setsockopt(lfd,SOL_SOCKET,SO_REUSEADDR,&on,sizeof(on))<0){perror("setsockopt")…
阅读更多...
Qt QScript 之 C++/JavaScript相互调用

Qt QScript 之 C++/JavaScript相互调用

文章目录 Qt Script什么是ECMAScriptQt 中JavaScriptclass 详解Basic UsageQObject对脚本引擎可用使用信号槽connect 三种模式访问属性, 子对象使c++对象可用于用Qt Script编写的脚本C++ 类成员函数可用于脚本C++ 类属性可用于脚本对脚本中的c++对象信号的反应函数对象和本机函…
阅读更多...
CRMEB多店版v3.0前端技术革新与实践

CRMEB多店版v3.0前端技术革新与实践

摘要 随着移动互联网技术的飞速发展&#xff0c;用户对移动应用的体验要求日益提高。CRMEB多店版v3.0作为一款针对多门店管理的电商系统&#xff0c;在前端技术层面进行了全面的革新与优化。本文将从移动端UI设计、页面功能更新、DIY设计功能升级、移动端平台与门店管理、营销…
阅读更多...
Kubernetes 系统监控Metrics Server、HorizontalPodAutoscaler、Prometheus

Kubernetes 系统监控Metrics Server、HorizontalPodAutoscaler、Prometheus

Metrics Server Linux 系统命令 top 能够实时显示当前系统的 CPU 和内存利用率&#xff0c;它是性能分析和调优的基本工具。 Kubernetes 也提供了类似的命令&#xff0c;就是 kubectl top&#xff0c;不过默认情况下这个命令不会生效&#xff0c;必须要安装一个插件 Metrics …
阅读更多...
halcon程序如何导出C#文件

halcon程序如何导出C#文件

1.打开halcon文件&#xff1b; 2.写好需要生成C#文件的算子或函数&#xff1b; 3.找到档案-输出&#xff0c;如下图&#xff1b; 4.点击输出&#xff0c;弹出如下窗口 &#xff08;1&#xff09;可以修改导出文件的存储路径 &#xff08;2&#xff09;选择C#-HALCON/.NET &…
阅读更多...
centos7 openssh9.7p 制作rpm包

centos7 openssh9.7p 制作rpm包

centos7 openssh9.7p 制作rpm包 下载源码包&#xff1a;通过git开源打包源码准备编译打包环境编译打包上传rpm包到需要更新的服务器,并更新 下载源码包&#xff1a; 一般只用ssh源码就可以了 cd /root wget https://cdn.openbsd.org/pub/OpenBSD/OpenSSH/portable/openssh-9.7p…
阅读更多...
论文《Causal Inference for Recommender Systems》阅读

论文《Causal Inference for Recommender Systems》阅读

论文《Causal Inference for Recommender Systems》阅读 论文概况论文动机&#xff08;Introduction&#xff09;MethodologyPreliminariesClassical Causal Inference & Causal AdjustmentDeconfounded Recommender 总结 论文概况 今天给大家带来的是发表在推荐系统顶会 …
阅读更多...
使用Spring Boot自定义注解 + AOP实现基于IP的接口限流和黑白名单

使用Spring Boot自定义注解 + AOP实现基于IP的接口限流和黑白名单

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…
阅读更多...
IDEA启动jsp项目

IDEA启动jsp项目

1、背景 有个老项目的前端需要修改&#xff0c;整来源码之后发现是比较古老的jsp项目&#xff0c;需要在idea中启动下试试 2、代码配置流程 常规的配置流程网上都有 2.1 首先找到Project Structure 2.2 配置web.xml 注意下方的 web resource directory, web.xml中的写的相对…
阅读更多...
Markdown 使用技巧之利用 Mermaid 进行绘制流程图

Markdown 使用技巧之利用 Mermaid 进行绘制流程图

文章目录 前言一、基础语法1.1 声明图像类型1.2 声明排列方向1.3 声明节点1.4 声明节点形状1.5 声明节点间的连接1.5.1 基本连接线1.5.2 调整链接的长度1.5.3 调整链接的样式二、流程图-进阶使用2.1 自定义节点样式2.2 自定义形状大小2.3 自定义链接样式2.4 视图分组三、使用场…
阅读更多...
校园安保巡逻机器人

校园安保巡逻机器人

2023年8月5日&#xff0c;陕西西安一高校实验室起火冒烟&#xff0c;导致学校化学实验室发生火灾。2022年8月3日&#xff0c;一名歹徒持械闯入江西吉安安福县城的一家私立幼儿园&#xff0c;对着无辜的幼儿行凶伤人&#xff0c;造成3死6伤。 像这样的事故有不断地发生&#xf…
阅读更多...
161.二叉树：在每个树中找最大值（力扣）

161.二叉树：在每个树中找最大值（力扣）

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}* Tre…
阅读更多...
C语言王国——杨氏矩阵

C语言王国——杨氏矩阵

目录 1. 引言 2. 了解杨氏矩阵 3. 思路分析 4. 代码 5. 总结 1. 引言 最近在做二维数组的训练的时候发现了一个很有意思的题&#xff1a; 一看这不是杨氏矩阵嘛&#xff0c;接下来就由姜糖我带大家了解一下这个著名的矩阵。 2. 了解杨氏矩阵 通过查阅百度得知&#xff1a; …
阅读更多...
python数据分析——datetime数据类型1

python数据分析——datetime数据类型1

参考资料&#xff1a;活用pandas库 1、python的datetime对象 # 导入datetime对象 from datetime import datetime# 获取当前日期和时间 nowdatetime.now() print(now)# 手动创建datetime t1datetime.now() t2datetime(1970,1,1) # 对datetime做数学运算 difft1-t2 print(diff…
阅读更多...
儿童节快乐！探索图形化编程桌面的“童年”成长之路

儿童节快乐！探索图形化编程桌面的“童年”成长之路

在这个充满童真与快乐的儿童节&#xff0c;我要向在CSDN平台上努力拼搏的每一位朋友&#xff0c;送上我最热切、最深情的祝福&#xff01;愿你们心中那份孩童般的纯真与对世界无尽的好奇永不褪色&#xff0c;愿你们的人生道路如同这个美好的节日&#xff0c;流光溢彩、欢乐永恒…
阅读更多...
lynis安全漏洞扫描工具

lynis安全漏洞扫描工具

Lynis是一款Unix系统的安全审计以及加固工具&#xff0c;能够进行深层次的安全扫描&#xff0c;其目的是检测潜在的时间并对未来的系统加固提供建议。这款软件会扫描一般系统信息&#xff0c;脆弱软件包以及潜在的错误配置。 安装 方式1 git下载使用git clone https://github…
阅读更多...
docker compose完成简单项目部署

docker compose完成简单项目部署

1. 项目环境 centos7 docker mysql redis ruoyi项目 ruoyi项目链接&#xff1a;https://gitee.com/y_project/RuoYi-Vue.git 2. 进行项目前后端代码打包 后端打包&#xff1a; 修改mysql连接的相关配置文件 RuoYi-Vue/ruoyi-admin/src/main/resources/application-dru…
阅读更多...
浙江零排参加全国水科技大会暨技术装备成果展览会（成都）并作主论坛演讲

浙江零排参加全国水科技大会暨技术装备成果展览会（成都）并作主论坛演讲

2024年5月13日-15日中华环保联合会、福州大学、上海大学等联合举办的2024年全国水科技大会暨技术装备成果展览会在成都顺利举办。浙江零排城乡规划发展有限公司司受邀参加&#xff0c;首日有幸听取徐祖信院士、任洪强院士、汪华林院士等嘉宾的主旨报告。主旨报告后&#xff0c;…
阅读更多...
Java过滤特殊空格nbsp；

Java过滤特殊空格nbsp；

现象&#xff1a; 用Java处理excel文件中的以下字符串时&#xff0c;想去除此空格&#xff0c;却发现用String.trim()没有直到预期效果&#xff1a; 原因&#xff1a; 在网上找了下&#xff0c;应该是这其实是html中经常使用的一种特殊空格字符&nbsp&#xff1b; 处理&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023