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

官方小程序

图片

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

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

相关文章

LLM的基础模型6：注意力机制

LLM的基础模型6：注意力机制

大模型技术论文不断，每个月总会新增上千篇。本专栏精选论文重点解读，主题还是围绕着行业实践和工程量产。若在某个环节出现卡点，可以回到大模型必备腔调或者LLM背后的基础模型新阅读。而最新科技（Mamba,xLSTM,KAN）则提…
阅读更多...
leetcode刷题-二叉树01

leetcode刷题-二叉树01

代码随想录二叉树part01|二叉树的理论基础 理论基础种类：存储方式：二叉树的遍历：二叉树定义方式： 理论基础 代码随想录文档讲解 种类： 满二叉树，节点数量： 2 n − 1 2^n-1 2n−1完全二叉树&a…
阅读更多...
MongoDB~索引使用与优化

MongoDB~索引使用与优化

Study by： https://docs.mongoing.com/indexeshttps://www.cnblogs.com/Neeo/articles/14325130.html#%E5%85%B6%E4%BB%96%E7%B4%A2%E5%BC%95 作用 如果你把数据库类比为一本书，那书的具体内容是数据，书的目录就是索引，所以索引…
阅读更多...
NIST 电子病历中的疫苗部分的认证

NIST 电子病历中的疫苗部分的认证

美国国家标准与技术研究院（National Institute of Standards and Technology，NIST）对电子病历的认证 分几个阶段，每个阶段又分门诊和住院，然后又分若干模块。下面是疫苗模块的数据提交的测试脚本。 170.302k_Immuniza…
阅读更多...
数据提取：构建企业智能决策的基石

数据提取：构建企业智能决策的基石

在数字化时代，数据已成为企业最宝贵的资产之一。而数据提取，作为数据分析和智能决策的第一步，正日益成为企业构建竞争优势的关键环节。本文将探讨数据提取的重要性、方法以及它如何为企业的智能决策奠定坚实基础。 一、数据提取的重要性 洞…
阅读更多...
Rust 实现 kvmsample

Rust 实现 kvmsample

GitHub - BillXiang/kvmsample at rust cd kvmsample make cp test*.bin kvmsample-rust cd kvmsample-rust cargo run两个vm中分别执行IO_OUT和IO_IN: KVM_EXIT_IO_OUT addr:16 data:84 KVM_EXIT_IO_IN addr 16 KVM_EXIT_IO_OUT addr:16 data:85 KVM_EXIT_IO_IN addr 16 KVM_…
阅读更多...
多线程..

多线程..

线程定义：线程是操作系统能够进行运算调度的最小单位，它被包含在进程之中，是进程中实际运作单位。简单来说，应用软件中相互独立，可以同时运作的功能。 多线程作用：有了多线程，我们就可以让程序…
阅读更多...
【机器学习300问】108、什么是多项式回归模型？

【机器学习300问】108、什么是多项式回归模型？

一、多项式回归是什么 （1）举例说明 假设你经营着一家农场，想要根据土地面积来预测作物的产量。如果你只用线性模型（即），你可能会发现它并不足以描述实际的产量情况，因为实际产量可能会随着土地…
阅读更多...
NLP--机器学习

NLP--机器学习

1.定义：机器学习是一种从经验中学习关于某类任务和该任务执行性能衡量参数，并且性能衡量参数会随着经验的增加而提高的计算机程序。机器如何做我们能做的事，这是早期关于机器学习思想的起源。机器学习和程序编码最大的区别之一就是可以在没有…
阅读更多...
java国际化配置文件如何使用UTF8

java国际化配置文件如何使用UTF8

1.直接设置SpringMessage的编码 import org.springframework.boot.autoconfigure.AutoConfiguration; import org.springframework.context.MessageSource; import org.springframework.context.annotation.Bean; import org.springframework.context.support.ReloadableResou…
阅读更多...
Acwing 786.第K个数

Acwing 786.第K个数

Acwing 786.第K个数 题目描述 786. 第k个数 - AcWing题库 运行代码 #include <iostream> #include <algorithm> using namespace std; const int N 100010; int q[N];int main() {int n, k;scanf("%d%d", &n, &k);for (int i 0; i < n; …
阅读更多...
opencv进阶 ——（十三）基于三角剖分实现换脸

opencv进阶 ——（十三）基于三角剖分实现换脸

换脸的关键在于人脸对齐&#xff0c;人脸对齐主要包括以下几点&#xff1a; 1、人脸可能存在一定的角度&#xff0c;因此需要先将倾斜方向进行对齐 2、大小对齐&#xff0c;将模板人脸的大小缩放到同一大小 3、要想有好的效果&#xff0c;关键点选取很重要 4、人脸对齐后&a…
阅读更多...
#04 Stable Diffusion与其他AI图像生成技术的比较

#04 Stable Diffusion与其他AI图像生成技术的比较

文章目录 前言1. Stable Diffusion2. DALL-E3. GAN&#xff08;生成对抗网络&#xff09;4. VQ-VAE比较总结 前言 随着人工智能技术的飞速发展&#xff0c;AI图像生成技术已成为创意产业和科研领域的热点。Stable Diffusion作为其中的佼佼者&#xff0c;其性能和应用广受关注。…
阅读更多...
黑马python-JavaScript

黑马python-JavaScript

1.JavaScript的定义&#xff1a; JavaScript是运行在浏览器端的脚步语言&#xff0c;是由浏览器解释执行的、简称js。它能够让网页和用户有交互功能&#xff0c;增加良好的用户体验效果 2.使用方式&#xff1a; 1.行内式&#xff08;主要用于事件&#xff09; <input type&q…
阅读更多...
开发常用软件

开发常用软件

开发相关 代码编译 Visual Studio 2019 Visual Studio 2022 代码测试工具 LINQPad Premium 5 LINQPad 7 打包工具 Advanced Installer 反编译工具 ILSpy dnSpy spy 数据库相关 SQLite Expert Professional 5 DLL扫描工具 depends 界面设计 SvgToXaml Materi…
阅读更多...
【大数据】计算引擎：Spark核心概念

【大数据】计算引擎：Spark核心概念

目录 前言 1.什么是Spark 2.核心概念 2.1.Spark如何拉高计算性能 2.2.RDD 2.3.Stage 3.运行流程 前言 本文是作者大数据系列中的一文&#xff0c;专栏地址&#xff1a; https://blog.csdn.net/joker_zjn/category_12631789.html?spm1001.2014.3001.5482 该系列会成体…
阅读更多...
JAVA技术设计模式

JAVA技术设计模式

设计模式结构图 设计原则 职责单一原则接口隔离原则 一个类对另一个类的依赖应该建立在最小的接口上 依赖倒置面向接口编程，参数或变量，依赖注入，使用父类 开闭原则 对扩展开放（对提供方），对修改关闭（对使用方） 用抽象构建框架，用实现扩展细节 里氏替换原则…
阅读更多...
java中的双列集合（Map，HashMap，TreeMap，LinkedHashMap）

java中的双列集合（Map，HashMap，TreeMap，LinkedHashMap）

双列集合的特点 双列集合一次需要存一对数据&#xff0c;分别为键和值 键不能重复&#xff0c;值可以重复 键和值是一一对应的&#xff0c;每一个键只能找到自己对应的值 键值这个整体 &#xff0c;我们称之为“键值对”或者“键值对对象”&#xff0c;在Java中叫做“Entry对象…
阅读更多...
CAPL如何发送一条UDP报文

CAPL如何发送一条UDP报文

UDP作为传输层协议，本身并不具有可靠性传输特点，所以不需要建立连接通道，可以直接发送数据。当然，前提是需要知道对方的通信端点，也就是IP地址和端口号。 端口号是传输层协议中最显著的特征，传输层根据它来确定上层绑定的应用程序，以达到把数据交给上层应用处理的目的。…
阅读更多...
Elementary OS 7.1简单桌面调整

Elementary OS 7.1简单桌面调整

Elementary OS的Pantheon桌面环境提供了一种非常独特和直观的用户体验。默认情况下&#xff0c;Pantheon桌面并没有提供传统的窗口最小化、最大化按钮。但是可以通过安装和使用特定的工具来调整和自定义这些设置。 可以通过以下步骤来启用窗口的最小化和最大化按钮&#xff1a…
阅读更多...
最新文章

Copyright @ 2022~2023