JeeSite 快速开发平台 Vue3 前端版介绍

JeeSite 快速开发平台 Vue3 前端版介绍：

它构建于 Vue3、Vite、Ant-Design-Vue、TypeScript 以及 Vue Vben Admin 等最前沿的技术栈之上，能助力初学者迅速上手并顺利融入团队开发进程。涵盖的模块包括组织机构、角色用户、菜单授权、数据权限、系统参数等。具备强大的组件封装，实现数据驱动视图。针对微小至中大型项目的开发，提供了现成的开箱即用解决方案以及丰富多样的示例。

在 Vben Admin 基础上所做出的改进有：

  • 对界面细节进行更为精致的优化改进，与信息化管理后台极为契合。

  • 主题风格得以改进，不同布局风格下，菜单及权限体验获得优化。

  • 顶部菜单、分隔菜单、混合菜单的活动状态激活与加载进行了优化改进。

  • 树表支持异步封装，提升展开折叠性能，支持按层次展开折叠树表。

  • 树结构增添了快捷刷新、动态生成树以及层次独立与不独立的数据返回兼容功能。

  • 新增左树右表功能展示，可折叠左树，树组件增设默认图标。

  • 表单组件适配各种数据格式来源，特别是多选字符串与数组的互转兼容得以实现。

  • 表单新增诸多便捷属性与表单组件，下拉框和树选择支持标签名回显。

  • 表单组件改进折叠表单 Action 的算法，实现智能化布局。

  • 表格组件具有更多 Action，支持横向显示操作，更为便捷。

  • 表格组件的子表编辑得以改进，表格列排序与重置也进行了优化。

  • 新增字典组件，可支持展示在表格列、表单组件下拉框、单选框等部位。

  • 字典标签支持 Tag、Badge、自定义 class、style 等显示风格。

  • 更便利地支持 Tab 页面的缓存，切换页签时不再重载页面内容。

  • Tab 页签界面美化，图标显示，且可在任何标签上右键进行快速刷新等。

  • 全局 Axios 改进，兼容各种数据格式，超时消息提醒也得到改进。

  • 还有众多细节改进、体验优化以及黑暗布局细节优化等。

Vue 端完全开源，一旦使用便会喜爱，着实极为便捷。

设计特点：
定义了众多组件，具备极为贴心的组件属性与小功能，契合 JeeSite 一贯的设计理念，列表和表单以数据驱动视图，极大地简化了业务功能开发。注释分解详见本页最下方的【源码解析】。

为何要推行数据驱动视图？因为前端向下兼容始终是重大问题，拥有一套相应的标准，对框架升级帮助极大。例如，能够以极小的成本，在业务代码改动极小的情况下实现前端升级；数据驱动视图可为未来自定义拖拽表单奠定更好的基础，使数据存储结构更清晰，更利于维护。

提示：请仔细研读源码解析，特别是表单视图和列表视图上的注释，对于复杂表单可采用多表单联合使用。

截图鉴赏

图片

图片

图片

图片

图片

图片

演示地址

  1. 地址：http://vue.jeesite.com/

  2. 账号：system

  3. 密码：admin

学习准备

  • Node.js 16 和 git - 开发环境

  • Vite - 熟悉 Vite 特性

  • Vue-v3 - 熟悉 Vue 基础语法

  • TypeScript - 熟悉 TypeScript 基本语法

  • ES6+ - 熟悉 ES6 基本语法

  • Vue-Router-v4 - 熟悉 vue-router 基本使用

  • Vue-Vben-Admin - 熟悉 UI 及表单列表及常用组件使用

  • Ant-Design-Vue - 熟悉 UI 基本使用

  • Mock.js - mockjs 基本语法

  • JeeSite-v5 - 后台服务

安装使用

  • 如果没有安装 Node.js（不低于 14，建议 16）

下载安装 Node.js 16：https://nodejs.org

  • 如果没有安装 Yarn 执行安装（要求 Yarn v1.x）

npm i -g yarn

  • 获取代码

git clone https://gitee.com/thinkgem/jeesite-vue.git

  • 安装依赖

cd jeesite-vue

yarn config set registry https://registry.npm.taobao.org
yarn install

  • 运行

yarn serve

开发环境会加载文件较多，便于调试，请耐心等待。

编译打包后，会合并这些文件，所以访问性能会大 & 大提高。

  • 打包

yarn build

打包完成后，会在根目录生成 dist 文件夹，发布 nginx。

有一些打包参数，详见 .env.production 里面有注释。

如果您使用的 VSCode 的话，推荐安装以下插件：

  • Iconify IntelliSense - Iconify 图标插件

  • windicss IntelliSense - windicss 提示插件

  • I18n-ally - i18n 插件

  • Volar - Vue3 开发必备（Vetur 禁用）

  • ESLint - 脚本代码检查

  • Prettier - 代码格式化

  • Stylelint - CSS 格式化

  • DotENV - .env 文件高亮

原文链接：

https://my.oschina.net/thinkgem/blog/5393041

项目地址：

https://gitee.com/thinkgem/jeesite-vue

官方技术交流群：

图片

了解更多

  • JeeSite 官网地址：http://jeesite.com

  • JeeSite 在线文档：http://docs.jeesite.com

  • JeeSite 演示地址：http://demo.jeesite.com

  • JeeSite Vue 演示地址：http://vue.jeesite.com

  • JeeSite 源码仓库：https://gitee.com/thinkgem/jeesite4

  • JeeSite Vue 前端源码：https://gitee.com/thinkgem/jeesite-vue

  • JeeSite 跨平台手机端：https://gitee.com/thinkgem/jeesite-uniapp

  • JeeSite Cloud 微服务：https://gitee.com/thinkgem/jeesite-cloud

  • JeeSite 客户端安装程序：https://gitee.com/thinkgem/jeesite-client

JeeSite 生态系统

  • 分布式微服务（Spring Cloud）：https://gitee.com/thinkgem/jeesite-cloud

  • Flowable 业务流程引擎（BPM）：http://jeesite.com/docs/bpm/

  • JFlow 工作流引擎：https://gitee.com/thinkgem/jeesite-jflow

  • 多站点内容管理模块（CMS）：https://jeesite.com/docs/cms/

  • 手机端移动端：https://gitee.com/thinkgem/jeesite-uniapp

  • PC 客户端程序：https://gitee.com/thinkgem/jeesite-client

  • Vue3 分离版本：https://gitee.com/thinkgem/jeesite-vue

  • JeeSite 统一认证：https://jeesite.com/docs/oauth2-server

  • TopIAM 统一认证：https://gitee.com/thinkgem/jeesite-topiam

  • MaxKey 统一认证：https://gitee.com/thinkgem/jeesite-maxkey

  • MybatisPlus: https://gitee.com/thinkgem/jeesite-mybatisplus

  • Magic 接口快速开发：https://gitee.com/thinkgem/jeesite-magic-api

  • 内外网中间件：https://my.oschina.net/thinkgem/blog/4624519

官方小程序

图片

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

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

相关文章

webpack 优化构建速度的插件

webpack 优化构建速度的插件

1.HardSourceWebpackPlugin本地缓存 HardSourceWebpackPlugin这个插件比DLL动态链接库更优秀 HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间…
阅读更多...
AI技术变革与企业服务创新

AI技术变革与企业服务创新

1、AI的技术变革 1）AI市场规模 2）AI大模型发展历程 3）AIGC发展背景 4）AIGC技术能力 AIGC的技术架构逻辑上分为基础层、技术层、能力层、应用层、终端层五大板块，其中核心技术层涵盖AI技术群和大模型的融合创新&#…
阅读更多...
Python 短文本匹配，短文本语义相似度，基于大模型的短文本匹配，基于LLMs的短文本语义相似度识别，短文本语义扩充和匹配

Python 短文本匹配，短文本语义相似度，基于大模型的短文本匹配，基于LLMs的短文本语义相似度识别，短文本语义扩充和匹配

1.任务描述 之前在做疾病相似度匹配的时候，堪称史诗级难题，虽然最后加上规则以及一些nlp模型，取得了差强人意的效果，但是短文本的语义相似度匹配一直属于比较难以攻克的难题 2.思路 随着近年大模型的飞速发展，就之前…
阅读更多...
Linux实验七：线程管理

Linux实验七：线程管理

目录 一、实验目的二、实验内容三、实验环境四、参考代码五、实验步骤步骤1. 编辑源代码test7.c步骤2. 编译源代码test7.c步骤3. 运行可执行程序test7步骤4. 进一步调试源代码test7.c 六、实验结果七、实验总结 一、实验目的 1、深入理解线程模型相关概念； 2、掌握…
阅读更多...
SpringBoot实现发送邮件功能

SpringBoot实现发送邮件功能

目录 一、开启邮件服务 二、导入pom依赖 三、配置yml文件 四、发送邮件 4.1、发送文字邮件 4.2、发送html邮件 4.3、发送附件邮件 4.4、发送图片邮件 一、开启邮件服务 这里拿QQ邮箱举例。 翻到下面进行开启，之后获取授权码。 二、导入pom依赖 <dependency><…
阅读更多...
AlaSQL.js：用SQL解锁JavaScript数据操作的魔法

AlaSQL.js：用SQL解锁JavaScript数据操作的魔法

简介 先附上 github 地址 https://github.com/AlaSQL/alasql AlaSQL.js - JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or …
阅读更多...
【机器学习】机器学习与智能交通在智慧城市中的融合应用与性能优化新探索

【机器学习】机器学习与智能交通在智慧城市中的融合应用与性能优化新探索

文章目录 引言机器学习与智能交通的基本概念机器学习概述监督学习无监督学习强化学习 智能交通概述交通流量预测交通拥堵管理智能信号控制智能停车管理 机器学习与智能交通的融合应用实时交通数据分析数据预处理特征工程 交通流量预测与优化模型训练模型评估 智能信号控制与优化…
阅读更多...
mysql中事务的简介

mysql中事务的简介

大家好。我们在日常开发过程中肯定都或多或少的用到过事务&#xff0c;而且在面试时&#xff0c;数据库的事务也是必问内容之一。今天我们就来说说mysql的事务。 为了方便我们下面内容的讲解&#xff0c;我们也先建立一个讲事务必用的表–account表&#xff0c;并在表中插入两…
阅读更多...
2024上半年主播又买了啥好东西？ | 老高居然买了仨手机当望远镜用！

2024上半年主播又买了啥好东西？ | 老高居然买了仨手机当望远镜用！

点击文末“阅读原文”即可参与节目互动 剪辑、音频 / 朱峰 运营 / SandLiu 卷圈 监制 / 姝琦 封面 / 姝琦Midjourney 产品统筹 / bobo 场地支持 / &#xff08;新&#xff09;声湃轩北京录音间 本期节目绝无广告&#xff0c;如有需要&#xff0c;我们还可以提供购买记录 …
阅读更多...
Qt 简易Word

Qt 简易Word

Ui界面如下&#xff1a; 查找和替换界面&#xff1a; 具体代码&#xff1a; GitHub : 简易Word Gitee : 简易Word
阅读更多...
el-table合计行前置在首行，自定义合计行方法

el-table合计行前置在首行，自定义合计行方法

背景 el-table原生合计行是在标签内增加show-summary属性&#xff0c;在表尾实现设计合计&#xff0c;且只对表格当前页面显示的列数据进行合计。element-UI效果如下图所示。 现要求在首行显示合计行&#xff0c;并自定义合计逻辑实现如下效果。 图示表格中&#xff0c;成本…
阅读更多...
正宇软件助力青岛打造智慧政协平台，引领新时代政协工作创新

正宇软件助力青岛打造智慧政协平台，引领新时代政协工作创新

在当前数字化、智能化浪潮的推动下&#xff0c;青岛市政协紧跟时代步伐&#xff0c;以“百舸争流奋楫先”的精神&#xff0c;不断开拓创新&#xff0c;推动政协工作高质量发展。5月30日&#xff0c;人民政协报报道了青岛市政协在推动高质量发展、加强思想政治引领、凝聚合作共识…
阅读更多...
李学龙 :涉水视觉

李学龙 :涉水视觉

源自&#xff1a;电子学报 作者&#xff1a;李学龙 注&#xff1a;若出现无法显示完全的情况&#xff0c;可搜索“人工智能技术与咨询”查看完整文章 摘 要 地球表面有约71%的面积被江河湖海等水体覆盖&#xff0c;陆地上的成像也会受到云雪雨雾等水体影响&#xff0c;但是…
阅读更多...
C++三大特性之继承，详细介绍

C++三大特性之继承，详细介绍

阿尼亚全程陪伴大家学习~ 前言 每个程序员在开发新系统时&#xff0c;都希望能够利用已有的软件资源&#xff0c;以缩短开发周期&#xff0c;提高开发效率。 为了提高软件的可重用性(reusability)&#xff0c;C提供了类的继承机制。 1.继承的概念 继承&#xff1a; 指在现有…
阅读更多...
软件项目建设方案编制参考模板（Word原件）

软件项目建设方案编制参考模板（Word原件）

1 引言 1.1 编写目的 1.2 项目概述 1.3 名词解释 2 项目背景 3 业务分析 3.1 业务需求 3.2 业务需求分析与解决思路 3.3 数据需求分析【可选】 4 项目建设总体规划【可选】 4.1 系统定位【可选】 4.2 系统建设规划 5 建设目标 5.1 总体目标 5.2 分阶段目标【可选】 5.2.1 业务目…
阅读更多...
迅为RK3562开发板ARM四核A53核心板瑞芯微国产人工智能Linux安卓

迅为RK3562开发板ARM四核A53核心板瑞芯微国产人工智能Linux安卓

iTOP-3562开发板采用瑞芯微RK3562处理器&#xff0c;内部集成了四核A53Mali G52架构&#xff0c;主频2GHZ&#xff0c;内置1TOPSNPU算力&#xff0c;RK809动态调频。支持OpenGLES1.1/2.0/3.2、0penCL2.0、Vulkan 1.1内嵌高性能2D加速硬件。 内置独立NPU, 算力达 1TOPS,可用于轻…
阅读更多...
硬件I2C读写MPU6050

硬件I2C读写MPU6050

硬件I2C读写MPU6050 SCL接PB10&#xff0c;SDA接PB11,但是硬件I2C引脚不可以任意指定。 查询引脚定义表&#xff0c;来规划引脚。但由于PB6,7,8,9被OLEDz占用&#xff0c;不方便接线了。 可以使用I2C2引脚&#xff0c;但必须是SCL对应PB10&#xff0c;SDA对应PB11&#xff0c;…
阅读更多...
嵌入式Linux系统编程 — 2.3 标准I/O库：格式化I/O

嵌入式Linux系统编程 — 2.3 标准I/O库：格式化I/O

目录 1 格式化I/O简介 2 格式化输出 2.1 格式化输出函数简介 2.2 格式控制字符串 format 2.3 示例程序 3 格式化输入 3.1 格式化输入简介 3.2 格式控制字符串 format 3.3 示例程序 1 格式化I/O简介 在先前示例代码中&#xff0c;经常使用库函数 printf() 来输出程序中…
阅读更多...
数据分析中的统计学基础及Python具体实现【数据分析】

数据分析中的统计学基础及Python具体实现【数据分析】

各位大佬好 &#xff0c;这里是阿川的博客&#xff0c;祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 Python 初阶 Python–语言基础与由来介绍 Python–…
阅读更多...
python的line[:-1]和line[-1]

python的line[:-1]和line[-1]

line[:-1]其实就是去除了这行文本的最后一个字符（换行符）后剩下的部分。 line = "abcde" line[:-1] 结果为：abcd line = "abcde" line[::-1] 结果为：edcba 示例3 [m : ] 代表列表中的第m+1项到最后一项 [ : n] 代表列表中的第一项到第n项 [-1] 代…
阅读更多...
最新文章

Copyright @ 2022~2023