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.rhkb.cn/news/343033.html

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

相关文章

小牛翻译API详解：功能、优势介绍及案例实战（附完整代码）

小牛翻译API详解：功能、优势介绍及案例实战（附完整代码）

写在前面小牛翻译是做什么的案例-调用图片翻译API进行英文翻译✔准备工作✔获取密钥✔调用API✔完整代码✔运行项目 使用建议 写在前面 随着全球化的快速发展和跨国交流的增多，翻译软件的市场需求持续增长。根据市场数据，全球语言翻译软件市场规模在过去…
阅读更多...
Linux命令篇（六）：vi/vim专项

Linux命令篇（六）：vi/vim专项

💝💝💝首先，欢迎各位来到我的博客，很高兴能够在这里和您见面！希望您在这里不仅可以有所收获，同时也能感受到一份轻松欢乐的氛围，祝您生活愉快！ 文章目录 一、什么是vim二…
阅读更多...
Vue3入门 - vue3相比于vue2的优点，及如何创建Vue3项目

Vue3入门 - vue3相比于vue2的优点，及如何创建Vue3项目

目录 一、认识Vue3 1. Vue2 选项式 API vs Vue3 组合式API 2. Vue3的优势 二、使用create-vue搭建Vue3项目 1. 认识create-vue 2. 使用create-vue创建项目 3.熟悉项目和关键文件 一、认识Vue3 1. Vue2 选项式 API vs Vue3 组合式API <script>export default …
阅读更多...
操作系统教材第6版——个人笔记6

操作系统教材第6版——个人笔记6

3.3.4 页面调度 页面调度 当主存空间已满而又需要装入新页时&#xff0c;页式虚拟存储管理必须按照一定的算法把已在主存的一些页调出去 #主存满加新&#xff0c;把已在主存一些页调出选择淘汰页的工作称为页面调度 选择淘汰页的算法称为页面调度算法 页面调度算法设计不当&a…
阅读更多...
BERT应用——文本间关联性分析

BERT应用——文本间关联性分析

本文结合了自然语言处理&#xff08;NLP&#xff09;和深度学习技术&#xff0c;旨在分析一段指定的任务文本中的动词&#xff0c;并进一步探讨这个动词与一系列属性之间的关联性。具体技术路径包括文本的词性标注、语义编码和模型推断。 一、技术思路 NLP和词性标注 在自然…
阅读更多...
基于fabric封装一个简单的图片编辑器(vue 篇)

基于fabric封装一个简单的图片编辑器(vue 篇)

介绍 前言vue demo版本react 版本 前言 对 fabric.js 进行二次封装&#xff0c;实现图片编辑器的核心功能。核心代码 不依赖 ui响应式框架vue ,react 都适用。 只写了核心编辑相关代码便于大家后续白嫖二次开发 核心代码我就没有打包发布 会 和 业务代码一起放到项目中。 vu…
阅读更多...
鸿蒙轻内核M核源码分析系列九 互斥锁Mutex

鸿蒙轻内核M核源码分析系列九 互斥锁Mutex

多任务环境下会存在多个任务访问同一公共资源的场景&#xff0c;而有些公共资源是非共享的临界资源&#xff0c;只能被独占使用。鸿蒙轻内核使用互斥锁来避免这种冲突&#xff0c;互斥锁是一种特殊的二值性信号量&#xff0c;用于实现对临界资源的独占式处理。另外&#xff0c;…
阅读更多...
博客系统测试报告

博客系统测试报告

博客系统 测试报告 一、项目背景 一个Web网站程序&#xff0c;你可以观看到其他用户博客也可以登录自己的账号发布博客&#xff0c;通过使用Selenium定位web元素、操作测试对象等方法来对个人博客系统的进行测试&#xff0c;测试的核心内容有用户登录、博客列表及博客数量的展…
阅读更多...
pypi 发布自己的包

pypi 发布自己的包

注册pypi个人用户 网址&#xff1a;https://pypi.org 目录结构dingtalk_utils 必须-pkgs- __init__.py .gitignore LICENSE 必须 README.md 必须 requirements.txt setup.py 必须安装依赖 pip install setuptools wheel安装上传工具 pip install twinesetup.py i…
阅读更多...
基于ChatGLM3的本地问答机器人部署流程

基于ChatGLM3的本地问答机器人部署流程

基于ChatGLM3的本地问答机器人部署流程 前言一、确定文件结构1.新建文件夹储存本地模型2.下载源码和模型 二、Anaconda环境搭建1.创建anaconda环境2.安装相关库3.设置本地模型路径4.启动 三、构建本地知识库1.下载并安装postgresql2.安装c库3.配置向量插件 四、线上运行五、 全…
阅读更多...
【全开源】JAVA打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码

【全开源】JAVA打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码

&#xff1a;构建便捷出行新体验 一、引言&#xff1a;探索打车系统小程序源码的重要性 在数字化快速发展的今天&#xff0c;打车系统小程序已成为我们日常生活中不可或缺的一部分。它以其便捷、高效的特点&#xff0c;极大地改变了我们的出行方式。而背后的关键&#xff0c;…
阅读更多...
从零开始学JAVA

从零开始学JAVA

一、编写Hello world程序 public class JavaMain1 {//主程序执行入口&#xff0c;main方法public static void main(String[] args){System.out.println("Hello world!");} } 运行结果 Hello world! java编写主程序常见错误&#xff1a; 1、System ---首字母没有…
阅读更多...
外汇天眼：金融服务补偿计划（FSCS）确认已任命清算人为TenetConnect Services有限公司

外汇天眼：金融服务补偿计划（FSCS）确认已任命清算人为TenetConnect Services有限公司

2024年6月5日&#xff0c;Tenet Group有限公司的董事们任命了Interpath有限公司的Ed Boyle、Howard Smith和Rob Spence为联合清算人。Ed Boyle和Rob Spence也被任命为其子公司Tenet有限公司、TenetConnect有限公司和TenetConnect Services有限公司的联合清算人。Tenet Mortgage…
阅读更多...
应对800G以太网挑战：数据中心迁移

应对800G以太网挑战：数据中心迁移

在过去几年中&#xff0c;云基础设施和服务的大规模使用推动了对更多带宽、更快速度和更低延迟性能的需求。交换机和服务器技术的改进要求布线和架构随之调整。因此&#xff0c;800G以太网对数据中心迁移的需求&#xff0c;特别是对速率&#xff08;包括带宽、光纤密度和通道速…
阅读更多...
突破性技术: 大语言模型LLM量化激活outliers异常值抑制

突破性技术: 大语言模型LLM量化激活outliers异常值抑制

LLM过去有两种突破性技术大大提升了量化精度&#xff0c;分别是group-wise量化和GPTQ/AWQ量化。前者相比于过去的per-tensor和per-channel/per-axis量化提出了更细粒度的对channel拆分为更小单元的量化方式&#xff0c;后者通过巧妙的算法明显提升了4bit量化的精度。 LLM量化存…
阅读更多...
接口的应用、 适配器设计模式

接口的应用、 适配器设计模式

接口的应用 适配器设计模式 Inter package com.itheima.a09;public interface Inter {public abstract void show1();public abstract void show2();public abstract void show3();public abstract void show4();}InterAdapter package com.itheima.a09; //抽象 public abs…
阅读更多...
二说springboot3的自动配置机制

二说springboot3的自动配置机制

大家好&#xff0c;这里是教授.F 目录 SpringBootApplication&#xff1a; EableAutoConfiguration&#xff1a; 上一篇文章粗略的讲了自动配置机制&#xff0c;二说系列将从源码的角度进行讲解。 SpringBootApplication&#xff1a; 首先我们还是得从SpringBootApplication…
阅读更多...
2 - 寻找用户推荐人（高频 SQL 50 题基础版)

2 - 寻找用户推荐人（高频 SQL 50 题基础版)

2.寻找用户推荐人 考点: sql里面的不等于&#xff0c;不包含null -- null 用数字判断筛选不出来 select name from Customer where referee_id !2 OR referee_id IS NULL;
阅读更多...
Cesium401 (Unauthorized)https://api.cesium.com/v1/assets/2/endpoint未授权问题

Cesium401 (Unauthorized)https://api.cesium.com/v1/assets/2/endpoint未授权问题

目录 前言1.原因分析2.解决问题1.禁用默认的imageryProvider2.禁用图层切换3.移除所有默认图层4.使用自己的地形(可选) 3.最终解决方案4.总结 前言 在初始化Cesium的Viewer以后&#xff0c;Viewer会自动去访问Cesium官网的资源&#xff0c;如果访问不到官网的资源&#xff0c;就…
阅读更多...
Prometheus + Grafana + Alertmanager 系统监控

Prometheus + Grafana + Alertmanager 系统监控

PrometheusGrafana 系统监控 1. 简介1.1 Prometheus 普罗 米修斯1.2 Grafana 2. 快速试用2.1 Prometheus 普罗 米修斯2.2 Prometheus 配置文件2.3 Grafana 2. 使用 Docker-Compose脚本部署监控服务3. Grafana 配置3.1 配置数据源 Prometheus3.2 使用模板ID 配置监控模板3.3 使用…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023