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）则提…
阅读更多...
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…
阅读更多...
数据提取：构建企业智能决策的基石

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

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

多线程..

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

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

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

黑马python-JavaScript

1.JavaScript的定义&#xff1a; JavaScript是运行在浏览器端的脚步语言&#xff0c;是由浏览器解释执行的、简称js。它能够让网页和用户有交互功能&#xff0c;增加良好的用户体验效果 2.使用方式&#xff1a; 1.行内式&#xff08;主要用于事件&#xff09; <input type&q…
阅读更多...
【大数据】计算引擎：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地址和端口号。 端口号是传输层协议中最显著的特征，传输层根据它来确定上层绑定的应用程序，以达到把数据交给上层应用处理的目的。…
阅读更多...
【Pytorch】计算机视觉项目——卷积神经网络TinyVGG模型图像分类（模型预测）

【Pytorch】计算机视觉项目——卷积神经网络TinyVGG模型图像分类（模型预测）

介绍 这篇文章是《【Pytorch】计算机视觉项目——卷积神经网络TinyVGG模型图像分类&#xff08;如何使用自定义数据集&#xff09;》的最后一部分内容&#xff1a;模型预测。 在本文中&#xff0c;我们将介绍如何测试模型的预测效果——让已训练好模型对一张新的图片进行分类&a…
阅读更多...
在 SEO 中，一个好的网页必须具备哪些 HTML 标签和属性？

在 SEO 中，一个好的网页必须具备哪些 HTML 标签和属性？

搜索引擎优化 &#xff08;SEO&#xff09; 是涉及提高网站在搜索引擎上的可见性的过程。这是通过提高网站在搜索引擎结果页面&#xff08;例如Google&#xff09;上的排名来实现的。网站在这些页面上的显示位置越高&#xff0c;就越有可能获得更大的流量。 搜索引擎优化涉及了…
阅读更多...
跑mask2former（自用）

跑mask2former（自用）

1. 运行docker 基本命令&#xff1a; sudo docker ps -a &#xff08;列出所有容器状态&#xff09; sudo docker run -dit -v /hdd/lyh/mask2former:/mask --gpus "device0,1" --shm-size 16G --name mask 11.1:v6 &#xff08;创建docker容器&…
阅读更多...
Mac系统使用COLMAP

Mac系统使用COLMAP

安装教程 如有出入&#xff0c;参照官网手册最新版 Installation — COLMAP 3.9-dev documentation 首先确保mac上安装了Homebrew 1.安装依赖项 brew install \cmake \ninja \boost \eigen \flann \freeimage \metis \glog \googletest \ceres-solver \qt5 \glew \cgal \s…
阅读更多...
万里长城第一步——尚庭公寓【技术概述】

万里长城第一步——尚庭公寓【技术概述】

简略版&#xff1a; 项目概述主要是移动端&#xff08;房源检索&#xff1b;预约看房&#xff0c;租赁管理&#xff0c;浏览历史&#xff09;和后台管理&#xff08;管理员对房源进行操作&#xff09;&#xff1b; 项目使用前后端分离的方法&#xff0c;主要以后端为主&#xf…
阅读更多...
rpm安装

rpm安装

rpm安装 命令格式&#xff1a; rpm 【选项】 文件名 选项&#xff1a; -i&#xff1a;安装软件 -v:显示安装过程信息 -h:用#表示安装进度&#xff0c;一个#代表2% -ivh&#xff1a;安装软件&#xff0c;显示安装过程 -e:卸载软件 -q:查看软件是否安装 -ql&#xff1…
阅读更多...
信息系统项目管理师0147：工具与技术（9项目范围管理—9.3规划范围管理—9.3.2工具与技术）

信息系统项目管理师0147：工具与技术（9项目范围管理—9.3规划范围管理—9.3.2工具与技术）

点击查看专栏目录 文章目录 9.3.2 工具与技术 9.3.2 工具与技术 专家判断 规划范围管理过程中&#xff0c;应征求具备如下领域相关专业知识或接受过相关培训的个人或小组 的意见&#xff0c;涉及的领域包括&#xff1a;以往类似项目&#xff1b;特定行业、学科和应用领域的信息…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023