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 能够继续引领前端开发的新潮流，推动前端技术的发展。

阅读全文扫码查看：

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

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

相关文章

mapbox加载全球3D建筑

mapbox加载全球3D建筑

本案例使用Mapbox GL JavaScript库进行加载全球3D建筑。 文章目录 1. 引入 CDN 链接2. 创建地图3. 监听地图加载完成事件3.1. 获取地图的样式中的图层3.2. 查找图层3.3. 添加三维建筑图层 4. 演示效果5. 代码实现 1. 引入 CDN 链接 <!-- 1.引入CDN链接 --> <script sr…
阅读更多...
C++模拟揭秘刘谦魔术，领略数学的魅力

C++模拟揭秘刘谦魔术，领略数学的魅力

新的一年又开始了&#xff0c;大家新年好呀~。在这我想问大家一个问题&#xff0c;有没有同学看了联欢晚会上刘谦的魔术呢&#xff1f; 这个节目还挺有意思的&#xff0c;它最出彩的不是魔术本身&#xff0c;而是小尼老师“念错咒语”而导致他手里的排没有拼在一起&#xff0c;…
阅读更多...
Android studio 侧边栏看不到 Commit 标签,不能方便的查看本地ChangaeList

Android studio 侧边栏看不到 Commit 标签,不能方便的查看本地ChangaeList

参考 如上图&#xff0c;一次升级后找不到commit 标签&#xff0c;造成不能很好的监测本地修改了那些文件&#xff0c;通过搜索找到显示的方法。&#xff0c;进入设置找红框位置&#xff0c;勾选复选款即可。 正常显示
阅读更多...
Python实现CCI工具判断信号：股票技术分析的工具系列（5）

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

Python实现CCI工具判断信号&#xff1a;股票技术分析的工具系列&#xff08;5&#xff09; 介绍算法解释 代码rolling函数介绍完整代码data代码CCI.py 介绍 在股票技术分析中&#xff0c;CCI (商品路径指标&#xff09;是一种常用的技术指标&#xff0c;用于衡量股价是否处于超…
阅读更多...
JavaWeb Request：获取请求数据

JavaWeb Request：获取请求数据

Request是请求对象&#xff0c;Response是响应对象。 浏览器会发送HTTP请求到后台服务器[Tomcat]&#xff0c;请求中会包含很多请求数据 [请求行请求头请求体] &#xff0c;后台服务器[Tomcat]会对HTTP请求中的数据进行解析并把解析结果存入到Request对象&#xff0c;可以从Req…
阅读更多...
Docker之数据卷

Docker之数据卷

目录 一、什么是数据卷 二、自定义镜像 一、什么是数据卷 1.1Docker 数据管理 在生产环境中使用 Docker &#xff0c;往往需要对数据进行持久化&#xff0c;或者需要在多个容器之间进行 数据共享&#xff0c;这必然涉及容器的数据管理操作 二、操作 将宿主机的目录与容器的…
阅读更多...
双通道音频功率放大电路，外接元件少， 通道分离性好，3V 的低压下可正常使用——D2025

双通道音频功率放大电路，外接元件少， 通道分离性好，3V 的低压下可正常使用——D2025

D2025 为立体声音频功率放大集成电路&#xff0c;适用于各类袖珍或便携式立体声 收录机中作功率放放大器。 D2025 采用 DIP16 封装形式。 主要特点&#xff1a;  适用于立体声或 BTL 工作模式  外接元件少  通道分离性好  电源电压范围宽&#xff08;3V~12V &#xff…
阅读更多...
深度学习GPU环境安装（WINDOWS安装NVIDIA）

深度学习GPU环境安装（WINDOWS安装NVIDIA）

1.检测是否支持GPU环境 1.1.打开设备管理器 winows下面搜索设备管理器&#xff08;或者从桌面"此电脑"——>右键点击——>"管理"打开&#xff09; 1.2.查看本地显卡 在"设备管理器"——"显示适配器"中&#xff0c;如果没有&…
阅读更多...
瑞吉外卖项目详细分析笔记及所有功能补充代码

瑞吉外卖项目详细分析笔记及所有功能补充代码

目录 项目刨析简介技术栈项目介绍项目源码 一.架构搭建1.初始化项目结构2.数据库表结构设计3.项目基本配置信息添加公共字段的自动填充全局异常处理类返回结果封装的实体类 二.管理端业务开发1.员工管理相关业务1.1员工登录1.2员工退出1.3过滤器拦截1.4员工信息修改1.5员工信息…
阅读更多...
ElasticSearch之分片相关概念segment，merge，refresh等

ElasticSearch之分片相关概念segment，merge，refresh等

写在前面 本文看下分片相关概念&#xff0c;segment&#xff0c;merge&#xff0c;refresh等。 1&#xff1a;segment&#xff0c;commit point&#xff0c;.del 一个倒排索引的文件称为segment&#xff0c;多个segment组合在一起就是lucene的index&#xff0c;也就是es的sh…
阅读更多...
线程变量ThreadLocal用于解决多线程并发时访问共享变量的问题。

线程变量ThreadLocal用于解决多线程并发时访问共享变量的问题。

ThreadLocal介绍 ThreadLocal叫做线程变量&#xff0c;用于解决多线程并发时访问共享变量的问题。意思是ThreadLocal中填充的变量属于当前线程&#xff0c;该变量对其他线程而言是隔离的&#xff0c;也就是说该变量是当前线程独有的变量。ThreadLocal为变量在每个线程中都创建…
阅读更多...
12. Nginx进阶-Location

12. Nginx进阶-Location

简介 Nginx的三大区块 在Nginx中主要配置包括三个区块&#xff0c;结构如下&#xff1a; http { #协议级别include /etc/nginx/mime.types;default_type application/octet-stream;log_format main $remote_addr - $remote_user [$time_local] "$r…
阅读更多...
ssl证书无效是否继续访问啥意思

ssl证书无效是否继续访问啥意思

SSL证书&#xff08;Secure Sockets Layer&#xff09;是现代互联网通信安全的基础组成部分&#xff0c;尤其对于涉及敏感信息交换的HTTPS站点至关重要。当浏览器提示“SSL证书无效”时&#xff0c;这意味着浏览器无法验证网站的身份或确定其加密连接的安全性。这种情况下&…
阅读更多...
基于Python+Flask实现一个TODO任务管理系统网站

基于Python+Flask实现一个TODO任务管理系统网站

随着科技的进步&#xff0c;数字化的任务清单逐渐成为生活中不可或缺的一部分。它们不仅可以帮助我们跟踪日常任务&#xff0c;还可以提高效率。但是&#xff0c;你是否考虑过自己制作一个任务管理系统呢&#xff1f; 好消息是&#xff0c;使用Python和Flask&#xff0c;我们可…
阅读更多...
器件选型【MOS，三极管篇】

器件选型【MOS，三极管篇】

三极管篇&#xff1a; 三极管的两大作用&#xff1a;做开关使用和放大电流 一句话总结&#xff1a;三极管选型主要考虑集电极最大允许电流&#xff0c;集电极-发射极反向击穿电压&#xff0c;集电极最大允许耗散功率&#xff0c;特征频率&#xff0c;封装形式&#xff0c;工作…
阅读更多...
电脑防火墙怎么关？分享2个简单方法

电脑防火墙怎么关？分享2个简单方法

在当今数字化时代&#xff0c;保护计算机免受网络威胁和恶意软件攻击是至关重要的。电脑防火墙作为一种重要的安全措施&#xff0c;可以有效地阻止未经授权的网络访问&#xff0c;保障您的个人信息和数据安全。 然而&#xff0c;有时候在特定情况下&#xff0c;您可能需要临时…
阅读更多...
【ES入门一：基础概念】

【ES入门一：基础概念】

集群层面上的基础概念 集群 由多个es实例组成的叫做集群 节点 单个ES的服务实例叫做节点。每个实例都有自己的名字&#xff0c;就是在配置文件中配置的‘node.name’中的内容。为了标识每个节点&#xff0c;每个节点启动后都会分配一个UID&#xff0c;存储在data目录。每个…
阅读更多...
【leetcode】三数之和 双指针

【leetcode】三数之和 双指针

/*** param {number[]} nums* return {number[][]}*/ var threeSum function(nums) {nums.sort((a,b)>a-b);let result[];for(let i0;i<nums.length-2;i){if(nums[i]>0) return result;//因为求三数之和等于0&#xff0c;如果第一个数已经大于0&#xff0c;后面肯定无…
阅读更多...
数仓实战——懂车帝数据指标体系建设和应用实践

数仓实战——懂车帝数据指标体系建设和应用实践

目录 一、如何建立指标体系规范 1.1 懂车帝业务介绍 1.2 为什么要做指标体系规范 1.3 DataLeap 指标管理平台 1.4 指标体系建设框架 1.5 指标元数据管理规范 二、指标模型建设在数仓工作中的收敛 2.1 指标模型建设存在的问题 2.2 指标模型数仓层级建设标准 2.3 从指标…
阅读更多...
stm32f103zet6笔记1-led工程

stm32f103zet6笔记1-led工程

1、选择串口调试 2、LED0连接到PB5&#xff0c;PB5设置为推挽输出。PE5同理。 3、生成成对的.c,.h文件。 4、debugger选择j-link。 5、connection选择SWD。 6、编写bsp_led.c,bsp_led.h文件。 7、下载调试&#xff0c;可以看到LED0 500ms闪烁一次&#xff0c;LED1 1000ms闪烁一…
阅读更多...
最新文章

Copyright @ 2022~2023