JeeSite Vue3：前端开发的未来之路

JeeSite Vue3：前端开发的未来之路

随着技术的飞速发展，前端开发技术日新月异。在这个背景下，JeeSite Vue3 作为一个基于 Vue3、Vite、Ant-Design-Vue、TypeScript 和 Vue Vben Admin 的前端框架，引起了广泛关注。它凭借其先进的技术栈和丰富的功能模块，为初学者和团队开发者提供了一个快速、高效且强大的开发平台。

JeeSite Vue3框架截图

图片

 

图片

 

图片

 

图片

 

图片

 

图片

 

图片

一、JeeSite Vue3 的技术栈

JeeSite Vue3 的技术栈包括 Vue3、Vite、Ant-Design-Vue、TypeScript 和 Vue Vben Admin。这些技术都是目前前端开发领域的领军者，它们结合在一起，为开发者提供了一个强大且现代化的开发环境。

Vue3 作为一款流行的前端框架，凭借其组件化的开发方式和简洁的 API，大大提高了开发效率。Vite 则是一个现代化的前端构建工具，提供了快速的冷启动和即时热更新，使得开发过程更加流畅。Ant-Design-Vue 是 Ant Design 的 Vue 实现，提供了一套高质量的 UI 组件，使界面设计更加美观和易用。TypeScript 是 JavaScript 的超集，通过静态类型检查和丰富的类型系统，提高了代码质量。最后，Vue Vben Admin 是一个高质量的后台管理系统模板，为中大型项目的开发提供了现成的解决方案。

在 Vben Admin 基础上做的改进：

  • 更精致的界面细节优化改进，非常适合信息化管理后台

  • 主题风格改进，不同的布局风格，菜单及权限体验优化

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

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

  • 树结构新增快捷刷新、动态生成树、层次独立和不独立的数据返回兼容

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

  • 表单组件适应各种数据格式来源，特别是多选字符串到数组的互转兼容

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

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

  • 表格组件，Action 更多，支持横向显示操作，更方便

  • 表格组件，子表编辑改进，表格列排序和重置改进优化

  • 新增字典组件，支持展示到表格列、表单组件下拉框单选框等

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

  • 更方便的支持 Tab 页面的缓存，切换页签的时候不重载页面内容

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

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

  • 功能权限鉴权改进，并兼容本地路由和后台路由同时使用

  • 等等各种细节改进，体验优化，黑暗布局细节优化

  • Vue端完全开源，用上你就会爱上，实在太方便了

设计特点

定义众多组件，非常贴心的组件属性及小功能，符合 JeeSite 以往的设计思想，列表和表单以数据驱动视图，极大简化了业务功能开发，注释分解详见本页最下【源码解析】

为什么做数据驱动视图？前端向下兼容一直是最大的问题，有了一套相应的标准，会对框架升级帮助很大。比如你可以非常小的成本，业务代码改动非常小的情况下，去升级前端；数据驱动视图可以为未来自定义拖拽表单做更好的铺垫，数据存储结构更清晰化，更利于维护。

提示：请仔细阅读源码解析，表单视图和列表视图上的注释哦，复杂表单可以多表单联合使用。

学习准备

  • VSCode - 推荐 IDE 集成开发工具

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

  • Vite - 熟悉 Vite 特性

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

  • TypeScript - 熟悉 TS 基本语法

  • ES6+ - 熟悉 ES6 基本语法

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

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

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

安装使用

  • 如果没有安装 Node.js 16，下载地址：https://nodejs.org

# 验证
node -v

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

npm i -g yarn
# 验证
yarn -v

  • 获取代码

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 preview

编译打包后，会整合这些文件，所以访问性能会大大提高，生产环境可以开启 gzip

  • 打包发布程序

yarn build

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

详见文档：https://jeesite.com/docs/vue-install-deploy/#部署到正式服务器

后端服务

  • 安装后台服务 JeeSite v5.x

  • 打开 .env.development 文件，修改后台接口：

# 代理设置，可配置多个，不能换行，格式：[访问接口的根路径, 代理地址, 是否保持Host头]
# VITE_PROXY = [["/js","https://vue.jeesite.com/js",true]]
VITE_PROXY = [["/js","http://127.0.0.1:8980/js",false]]# 访问接口的根路径
VITE_GLOB_API_URL = # 访问接口的前缀，在根路径之后
VITE_GLOB_API_URL_PREFIX = /js

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

  • Iconify IntelliSense - Iconify 图标插件

  • windicss IntelliSense - windicss 提示插件

  • I18n-ally - i18n 插件

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

  • ESLint - 脚本代码检查

  • Prettier - 代码格式化

  • Stylelint - CSS 格式化

  • DotENV - .env 文件高亮

演示地址

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

二、JeeSite Vue3 的模块构成

JeeSite Vue3 包含了组织机构、角色用户、菜单授权、数据权限和系统参数等模块。这些模块覆盖了系统开发的各个方面，为开发者提供了全方位的支持。

组织机构和角色用户模块用于管理用户和权限，保证了系统的安全性。菜单授权模块让开发者能够灵活地控制用户对不同功能的访问，实现了细粒度的权限控制。数据权限模块提供了数据层面的权限控制，确保了数据的保密性和完整性。系统参数模块则提供了必要的配置信息，为系统运行保驾护航。

三、JeeSite Vue3 在项目开发中的应用

JeeSite Vue3 的强大组件封装和数据驱动视图特性，使得它在微小至中大型项目的开发中都能发挥出色。无论是初学者还是资深开发者，都能通过 JeeSite Vue3 快速上手，投入到团队开发中去。它为开发者提供了现成的解决方案和丰富的示例，大大减少了重复造轮子的工作，让开发者能够专注于业务逻辑的实现。

四、结语

JeeSite Vue3 作为一款引领未来的前端框架，凭借其先进的技术栈和丰富的功能模块，为前端开发者提供了一个全新的开发体验。它让初学者能够快速入门，同时也为团队开发者提供了强大的支持。无论是微小项目还是中大型项目，JeeSite Vue3 都能够提供现成的解决方案和丰富的示例，使开发过程变得更加高效。未来，我们期待 JeeSite Vue3 能够继续引领前端开发的新潮流，推动前端技术的发展。

阅读全文扫码查看：

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

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

相关文章

web小游戏，蜘蛛纸牌

web小游戏，蜘蛛纸牌

H5小游戏源码、JS开发网页小游戏开源源码大合集。无需运行环境，解压后浏览器直接打开。有需要的订阅后，私信本人，发源码，含60+小游戏源码。如五子棋、象棋、植物大战僵尸、贪吃蛇、飞机大战、坦克大战、开心消消乐、扑鱼达人、扫雷、打地鼠、斗地主等等。 <!DOCTYPE h…
阅读更多...
Python图像处理【21】基于卷积神经网络增强微光图像

Python图像处理【21】基于卷积神经网络增强微光图像

基于卷积神经网络增强微光图像 0. 前言1. MBLLEN 网络架构2. 增强微光图像小结系列链接 0. 前言 在本节中&#xff0c;我们将学习如何基于预训练的深度学习模型执行微光/夜间图像增强。由于难以同时处理包括亮度、对比度、伪影和噪声在内的所有因素&#xff0c;因此微光图像增…
阅读更多...
排序——堆排序

排序——堆排序

本节继续复习排序算法。这次复习排序算法中的堆排序。 堆排序属于选择排序。 目录 什么是堆&#xff1f; 堆排序 堆排序的思想 堆排代码 向下调整算法 堆排整体 什么是堆&#xff1f; 在复习堆排序之前&#xff0c; 首先我们需要回顾一下什么是堆 。 堆的本质其实是一个数…
阅读更多...
游戏引擎用什么语言开发上层应用

游戏引擎用什么语言开发上层应用

现在主流的游戏引擎包括&#xff1a; 1、Unity3D&#xff0c;C#语言&#xff0c;优点在于支持几乎所有平台 丹麦创立的一家公司&#xff0c;现已被微软收购。在中国市场占有率最高&#xff0c;也是社群很强大&#xff0c;一般解决方案也能在网上找到&#xff0c;教程丰富。物理…
阅读更多...
Golang pprof 分析程序的使用内存和执行时间

Golang pprof 分析程序的使用内存和执行时间

一、分析程序执行的内存情况 package mainimport ("os""runtime/pprof" )func main() {// ... 你的程序逻辑 ...// 将 HeapProfile 写入文件f, err : os.Create("heap.prof")if err ! nil {panic(err)}defer f.Close()pprof.WriteHeapProfile(f…
阅读更多...
139.乐理基础-一四五八度为何用纯?

139.乐理基础-一四五八度为何用纯?

上一个内容&#xff1a;138.乐理基础-等音、等音程的意义-CSDN博客 上一个内容里练习的答案&#xff1a; 以乐理里写的知识&#xff0c;没办法完全解释透彻 一四五八度为何用纯&#xff1f;这个问题&#xff0c;要透彻的话要从各个文明怎么发现音高、发明音高、制定规则等&…
阅读更多...
Vue3+element-plus复杂表单分组处理

Vue3+element-plus复杂表单分组处理

一、为什么表单要分组处理&#xff1f; 方便表单字段的复用&#xff1a;例如&#xff0c;你的表单有十个字段会在很多的表单都会用到&#xff0c;那么表单则需要进行分组进行表单复用&#xff1b;实现不同角色的表单权限控制&#xff1a;例如一个表单有60个字段&#xff0c;角…
阅读更多...
VisualStudio 2022的安装

VisualStudio 2022的安装

1.IDE 推荐最新版VisualStudio2022&#xff0c;功能十分强大&#xff0c;社区版就够用了。下载地址 2.安装 工作负载选择桌面开发&#xff0c;Web开发可以暂时不选中&#xff08;大部分都用不到&#xff09;。 单个组件选中NET 6.0和NET Frameword4.6.1 也就可以了。 后面安…
阅读更多...
14-RPC-自研微服务框架

14-RPC-自研微服务框架

RPC RPC 框架是分布式领域核心组件&#xff0c;也是微服务的基础。 RPC &#xff08;Remote Procedure Call&#xff09;全称是远程过程调用&#xff0c;相对于本地方法调用&#xff0c;在同一内存空间可以直接通过方法栈实现调用&#xff0c;远程调用则跨了不同的服务终端&a…
阅读更多...
汽车零部件制造中的信息抽取技术：提升效率与质量的关键

汽车零部件制造中的信息抽取技术：提升效率与质量的关键

一、引言 在汽车制造业中&#xff0c;零部件的生产是整个制造流程的关键一环。这些零部件&#xff0c;包括但不限于制动系统、转向系统和传动系统&#xff0c;是确保汽车安全、可靠运行的基础。为了满足现代汽车工业对效率和质量的严格要求&#xff0c;制造商们纷纷投入到高度…
阅读更多...
Jetpack Compose: Hello Android

Jetpack Compose: Hello Android

Jetpack Compose 是一个现代化的工具包&#xff0c;用于使用声明式方法构建原生 Android UI。在本博文中&#xff0c;我们将深入了解一个基本的 “Hello Android” 示例&#xff0c;以帮助您开始使用 Jetpack Compose。我们将探讨所提供代码片段中使用的函数和注解。 入门 在…
阅读更多...
软件测试--性能测试工具JMeter

软件测试--性能测试工具JMeter

软件测试--性能测试工具JMeter 主流性能测试工具1.主流性能测试工具Loadrunner和Jmeter对比 —— 相同点2.主流性能测试工具Loadrunner和Jmeter对比 —— 不同点JMeter基本使用JMeter环境搭建1.安装JDK：2.安装Jmeter：3.注意点：JMeter功能概要1. JMeter文件目录介绍1.1 bin目…
阅读更多...
瑞_23种设计模式_享元模式

瑞_23种设计模式_享元模式

文章目录 1 享元模式&#xff08;Flyweight Pattern&#xff09;1.1 介绍1.2 概述1.3 享元模式的结构1.4 享元模式的优缺点1.5 享元模式的使用场景 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 4 JDK源码解析&#xff08;Integer类&#xff09; &#x1f64a; …
阅读更多...
13-Java代理模式 ( Proxy Pattern )

13-Java代理模式 ( Proxy Pattern )

Java代理模式 摘要实现范例 代理模式&#xff08;Proxy Pattern&#xff09;使用一个类代表另一个类的功能 代理模式创建具有现有对象的对象&#xff0c;以便向外界提供功能接口 代理模式属于结构型模式 摘要 1. 意图 为其他对象提供一种代理以控制对这个对象的访问2. 主…
阅读更多...
力扣206反转链表

力扣206反转链表

206.反转链表 力扣题目链接(opens new window) 题意&#xff1a;反转一个单链表。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 1&#xff0c;双指针 2&#xff0c;递归。递归参考双指针更容易写&#xff0c; 为什么不用头插…
阅读更多...
3.1_2024ctf青少年比赛部分web题

3.1_2024ctf青少年比赛部分web题

php后门 根据x-powered-by知道php的版本 该版本存在漏洞&#xff1a; PHP 8.1.0-dev 开发版本后门 根据报错信息&#xff0c;进行提示&#xff0c;前 GET / HTTP/1.1 Host: challenge.qsnctf.com:31639 User-Agentt:12345678system(cat /flag);var_dump(2*3);zerodium12345678…
阅读更多...
【小白学机器学习6】真实值，观测值，拟合值，以及数据的误差的评价：集中趋势，离散度，形状等

【小白学机器学习6】真实值，观测值，拟合值，以及数据的误差的评价：集中趋势，离散度，形状等

目录 1 世界上有哪几种值&#xff1f;只有3种值 1.1 真值/真实值/理想值/主观值&#xff08;形而上学世界里&#xff09; 1.2 实际值/现实值/观测值/样本值&#xff08;看到的/记录下来的&#xff09; 1.3 拟合值/预测值&#xff08;算出来的&#xff09; 2 对数据的各种…
阅读更多...
springboot项目单纯使用nacos注册中心功能

springboot项目单纯使用nacos注册中心功能

Spring Boot 项目完全可以单独使用 Nacos 作为注册中心。Nacos 是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。它支持服务的注册与发现&#xff0c;能够与 Spring Boot 应用无缝集成&#xff0c;为微服务架构提供了强大的支持。 在使用 Nacos 作为注册中…
阅读更多...
Python实现DMI工具判断信号：股票技术分析的工具系列（3）

Python实现DMI工具判断信号：股票技术分析的工具系列（3）

Python实现DMI工具判断信号&#xff1a;股票技术分析的工具系列&#xff08;3&#xff09; 介绍算法解释 代码rolling函数介绍完整代码 介绍 先看看官方介绍&#xff1a; DMI (趋向指标&#xff09; 用法 1.PDI线从下向上突破MDI线&#xff0c;显示有新多头进场&#xff0c;为…
阅读更多...
BUUCTF---[BJDCTF2020]藏藏藏1

BUUCTF---[BJDCTF2020]藏藏藏1

1.题目描述 2.下载附件&#xff0c;解压之后是一张图片和一个文本 3.把图片放在winhex,发现图片里面包含压缩包 4.在kali中使用binwalk查看&#xff0c;然后使用foremost分离&#xff0c;在使用tree查看分离出来的文件&#xff0c;最后将zip文件使用unzip进行解压。步骤如下 5.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023