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-vue3

pnpm 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.git

cd jeecgboot-vue3

  • 配置接口域名 .env.production

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

后台单体启动 见此文档

  • 编译项目

pnpm install

pnpm 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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

海外动态IP代理可以用来批量注册邮箱吗？

海外动态IP代理可以用来批量注册邮箱吗？

无论是个人还是企业，都需要使用邮箱进行沟通、注册账号、接收通知等多种用途。然而，由于互联网服务商为了防止滥用和垃圾邮件的传播，通常对注册邮箱设置了一定的限制，如IP限制、验证码验证等。为了解决这些问题，海外动…
阅读更多...
【EFK日志系统】docker一键部署filebeat、metricbeat

【EFK日志系统】docker一键部署filebeat、metricbeat

docker一键部署filebeat、metricbeat filebeat部署创建配置文件一键启动修改配置文件查验信息 metricbeat部署创建配置文件一键启动修改配置文件查验信息 上两篇文章写了搭建部署es集群和部署kibana 这篇写一键部署filebeat和metricbeat收集工具 规划服务器是 es01:172.23.16…
阅读更多...
段码屏|液晶显示模块|超低功耗LCD驱动芯片

段码屏|液晶显示模块|超低功耗LCD驱动芯片

1 简介 PC164S32 是一款支持 128 点 (32 4)显示 的多功能 LCD 控制器芯片，内部存储器RAM数据直接映射到 LCD 显示。可软件配置特性使其适用于包括 LCD 模块和显示子系统在内的多种 LCD 应用。主控制器与 PC164S32接口仅需3 或 4 条线。内置的省电模式极大的降低了功…
阅读更多...
MYSQL四大操作——查！查！查！

MYSQL四大操作——查！查！查！

目录 简洁版： 详解版： SQL通用语法： 分类： 1. DDL —库 1.1 查询： 1.2 创建： 1.3 删除 1.4 使用库 2. DDL—表 2.1 查询 2.1.1 查询当前库的所有表： 2.1.2 查询表结构 ： 2.1.…
阅读更多...
【云原生】Kubernetes----POD控制器

【云原生】Kubernetes----POD控制器

目录 引言 一、Pod控制器概述 二、Pod控制器的种类 （一）ReplicaSet （二）Deployment （三）StatefulSet （四）DaemonSet （五）Job 三、使用POD控制器 &a…
阅读更多...
江苏大信环境科技有限公司：环保领域的开拓者与引领者

江苏大信环境科技有限公司：环保领域的开拓者与引领者

2009 年，江苏大信环境科技有限公司在宜兴环保科技工业园成立。自创立之始，该公司便笃定坚守“诚信为本、以质量求生存、以创新谋发展”这一经营理念，全力以赴为客户构建专业的工业有机废气治理整体解决方案，进而成为国家高新技术企…
阅读更多...
Vxe UI vxe-upload 上传组件，显示进度条的方法

Vxe UI vxe-upload 上传组件，显示进度条的方法

vxe-upload 上传组件 查看官网 https://vxeui.com 显示进度条很简单，需要后台支持进度就可以了，后台实现逻辑具体可以百度，这里只介绍前端逻辑。 上传附件 相关参数说明，具体可以看文档： multiple 是否允许多选 li…
阅读更多...
6.5 Go 指针

6.5 Go 指针

💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…
阅读更多...
微信小程序上架，AI类目审核（AI问答、AI绘画、AI换脸）

微信小程序上架，AI类目审核（AI问答、AI绘画、AI换脸）

小程序对于生成式AI类目的产品上架审核较为严格，这也是近两年新增了几个类目，一旦小程序中涉及生成式AI相关的内容，如果你选择相应类目，但审核被划归为这一类，都需要准备此类目的审核，才能正常上架。 如果…
阅读更多...
Open3D(C++) Ransac拟合多项式曲线

Open3D(C++) Ransac拟合多项式曲线

目录 一、算法原理一、代码实现三、结果展示本文由CSDN点云侠原创，Open3D(C++) Ransac拟合多项式曲线，爬虫自重。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫与GPT生成的文章。 一、算法原理 RANSAC（Random Sample Consensus）是一种用于拟合模型的迭…
阅读更多...
dockers安装mysql

dockers安装mysql

1.dockerhub上搜索自己需要安装得镜像版本 dockerhub网址：https://hub-stage.docker.com docker pull mysql:5.7 #下载自己需要得版本2.启动容器实例，并且挂载容器数据卷 docker run -d -p 3306:3306 --privilegedtrue \ -v /home/mysql/log:/var/log/…
阅读更多...
WireShark抓包软件的使用 上海商学院 计算机网络 实验作业3

WireShark抓包软件的使用 上海商学院 计算机网络 实验作业3

实验目的 （1）熟悉wireShark软件操作界面和操作步骤； （2）学会捕获过滤器的设置方法； （3）学会显示过滤器的设置方法； （4）学会使用捕获报文的统计…
阅读更多...
全栈工程师需要具备哪些技能？

全栈工程师需要具备哪些技能？

概论： 全栈工程师是一位能够从头到尾构建 Web 应用程序的工程师，能独立完成产品。技术包括前端部分、后端部分和应用程序所在的基础架构。他们在整个技术栈中工作，并了解其中的每个部分。从需求分析开始，到概要设计，详…
阅读更多...
【计算机网络】——物理层（图文并茂）

【计算机网络】——物理层（图文并茂）

物理层 一.物理层概述1.物理层要实现的功能2.物理层接口特征1.机械特性2.电气特性3.功能特性4.过程特性 二.物理层下面的传输媒体1.传输媒体的分类2.导向型传输媒体1.同轴电缆2.双绞线3.光纤 3.非导向型传输媒体1.无线电波2.微波3.红外线4.激光5.可见光 三.传输方式1.串行传输与…
阅读更多...
小学数学出题器-Word插件-大珩助手

小学数学出题器-Word插件-大珩助手

Word大珩助手是一款功能丰富的Office Word插件，旨在提高用户在处理文档时的效率。它具有多种实用的功能，能够帮助用户轻松修改、优化和管理Word文件，从而打造出专业而精美的文档。 【新功能】小学数学出题器 1、实现了难度设定；…
阅读更多...
生成ssh密钥，使用ssh连接linux系统

生成ssh密钥，使用ssh连接linux系统

这里写目录标题 ssh密钥大概介绍1、密钥在哪里生成（客户端/服务器）？2、密钥生成是什么样子的？ ssh （生成密钥、密钥传输、配置连接、连接服务）过程1、生成密钥提示一：输入保存密钥的文件&#x…
阅读更多...
知名专业定制线缆知名智造品牌推荐-精工电联：解决水下机器人线缆行业痛点的领航者

知名专业定制线缆知名智造品牌推荐-精工电联：解决水下机器人线缆行业痛点的领航者

在科技日新月异的今天，精工电联作为高科技智能化产品及自动化设备专用连接线束和连接器配套服务商，致力于为高科技行业提供高品质、高性能的集成线缆和连接器定制服务。我们不仅是高品质定制线缆供应商，更是水下机器人线缆行业痛点的有效解决…
阅读更多...
Linux静态库与动态库加载

Linux静态库与动态库加载

了解库： 关于库相比大家之前肯定使用过，比如C/C里面的标准库，STL里面的各种库，我们在调用STL里的容器时都需要使用库，那么库到底是什么呢？ 库的本质就是可执行程序的"半成品" 我们先来回顾一下代…
阅读更多...
html中table 的边框合并 cellspacing

html中table 的边框合并 cellspacing

cellspacing中的数值代表单元格间距 cellspacing“0”代表没有间距&#xff0c;也是常用的方式 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> </head> <body><h4>没有单元格间…
阅读更多...
python实现——综合类型数据挖掘任务（无监督的分类任务）

python实现——综合类型数据挖掘任务（无监督的分类任务）

综合类型数据挖掘任务 航空公司客户价值分析。航空公司客户价值分析。航空公司客户价值分析。航空公司已积累了大量的会员档案信息和其乘坐航班记录&#xff08;air_data.csv&#xff09;&#xff0c;以2014年3月31日为结束时间抽取两年内有乘机记录的所有客户的详细数据。利用…
阅读更多...
最新文章

Copyright @ 2022~2023