Guns v7.3.0:基于 Vue3、Antdv 和 TypeScript 打造的开箱即用型前端框架

摘要

本文深入探讨了Guns v7.3.0前端项目,该项目是基于Vue3、Antdv和TypeScript的前端框架,以Vben Admin的脚手架为基础进行了改造。文章分析了Guns 7.3.0的技术特点,包括其使用Vue3、vite2和TypeScript等最新前端技术栈,以及提供的开箱即用架构对于学习和参考的价值。

一、引言

随着前端技术的飞速发展,Vue3、TypeScript等已成为前端领域的热门技术。在这样的背景下,Guns v7.3.0前端项目应运而生,它结合了Vue3、Antdv和TypeScript等主流技术,为开发者提供了一个高效、稳定的前端开发环境。

二、Guns v7.3.0项目介绍

Guns v7.3.0 前端项目,基于Vue3 + Antdv + TypeScript前端框架,整体基于Vben Admin的脚手架改造。

简介

Guns 7.3.0,前端采用Vue Vben Admin。使用了最新的vue3 + vite2 + TypeScript等主流技术开发,开箱即用的整套架构,也可用于学习参考。

文档

Guns文档地址

Vben前端文档地址

运行效果

图片

图片

图片

图片

  • 最新技术栈:使用 Vue3/vite2 等前端前沿技术开发

  • TypeScript: 应用程序级 JavaScript 的语言

  • 主题:可配置的主题

  • 国际化:内置完善的国际化方案

  • Mock 数据 内置 Mock 数据方案

  • 权限 内置完善的动态路由权限生成方案

  • 组件 二次封装了多个常用的组件

准备

  • node 和 git -项目开发环境

  • Vite - 熟悉 vite 特性

  • Vue3 - 熟悉 Vue 基础语法

  • TypeScript - 熟悉TypeScript基本语法

  • Es6+ - 熟悉 es6 基本语法

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

  • Ant-Design-Vue - ui 基本使用

  • Mock.js - mockjs 基本语法

安装使用

请先安装Node 18和pnpm。

  • 安装 Node 18

## 检查node版本
node -v
npm view node versions
## npm安装node
sudo npm cache clean -f
sudo npm install -g n
# 安装最新版本
sudo n latest
# 安装指定版本
sudo n 18.18.2
  • 安装 pnpm

sudo npm i -g pnpm
  • 通过pnpm 安装依赖

pnpm i vue -S
pnpm install
  • 运行

pnpm run dev
  • 打包

pnpm run build

技术特点

  1. Vue3与vite2:Guns v7.3.0基于Vue3和vite2构建,这使得项目具有更高的性能和更快的构建速度。Vue3引入了Composition API,使得代码更加组织化和可复用;而vite2则通过原生ESM提供极速的更新和启动速度。

  2. TypeScript:TypeScript作为JavaScript的一个超集,为开发者提供了强大的类型系统和编译时检查,有效减少了运行时的错误,提高了代码的可维护性和可读性。

  3. 可配置的主题:Guns v7.3.0提供了可配置的主题功能,开发者可以根据自己的需求轻松定制界面风格,满足不同的设计需求。

  4. 国际化:项目内置了完善的国际化方案,支持多语言切换,使得应用能够更好地适应不同地区的用户。

  5. Mock数据:内置Mock数据方案,方便开发者在开发过程中模拟后端数据,提高开发效率。

  6. 动态路由权限生成:Guns v7.3.0内置了完善的动态路由权限生成方案,能够根据用户的角色和权限动态生成路由,确保系统的安全性。

  7. 组件库:项目对多个常用组件进行了二次封装,提高了组件的复用性和开发效率。

三、Guns v7.3.0的价值

Guns v7.3.0作为一个基于Vue3、Antdv和TypeScript的前端项目,不仅为开发者提供了一个高效、稳定的前端开发环境,还通过其内置的多种功能,如可配置的主题、国际化、Mock数据等,大大提升了开发者的开发体验。同时,其动态路由权限生成方案和组件库也为开发者提供了强大的工具,使得开发者能够更加专注于业务逻辑的实现。

四、结论

Guns v7.3.0前端项目是一个基于Vue3、Antdv和TypeScript的前端框架,通过Vben Admin的脚手架进行了改造。其使用最新的前端技术栈,提供了开箱即用的整套架构,对于学习和参考具有极高的价值。随着前端技术的不断发展,Guns v7.3.0将继续发挥其优势,为开发者提供更加高效、稳定的前端开发体验。

项目下载地址:

https://gitee.com/stylefeng/guns-vue3-admin

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

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

相关文章

缓存弊处的体验:异常

缓存(cache),它是什么东西,有神马用,在学习内存的时候理解它作为一个存储器,来对接cpu和内存,来调节cpu与内存的速度不匹配的问题。 缓存,一个偶尔可以听到的专业名词,全…

哪种SSL证书可以快速签发保护http安全访问?

用户访问网站,经常会遇到访问http网页时,提示网站不安全或者不是私密连接的提示,因为http是使用明文传输,数据传输中可能被篡改,数据不被保护,通常需要SSL证书来给数据加密。 SSL证书的签发速度&#xff0…

甲骨文闲置ARM实例防回收的方法

前几日挖了个大坑,今天补一下,谈谈甲骨文闲置实例如何防止回收。 回收原则 2022年11月16日 Oracle添加声明: 从 2022 年 11 月 24 日开始,您闲置的 Always Free 计算实例可能会停止。巴拉巴拉,您还可以随时升级您的帐…

【Outlook】从Outlook新版回归经典版全攻略

引言 在微软宣布计划于2024年底淘汰邮件应用(Mail app)之后,许多用户发现新版Outlook应用(Outlook (new))在他们的Windows 11/10系统上自动启动。如果您更倾向于使用经典版Outlook(Outlook (classic)&…

LeetCode热题100刷题16:74. 搜索二维矩阵、33. 搜索旋转排序数组、153. 寻找旋转排序数组中的最小值、98. 验证二叉搜索树

74. 搜索二维矩阵 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {int row matrix.size();int col matrix[0].size();for(int i0;i<row;i) {//先排除一下不存在的情况if(i>0&&matrix[i][0]>target…

中介者模式(行为型)

目录 一、前言 二、中介者模式 三、总结 一、前言 中介者模式&#xff08;Mediator Pattern&#xff09;是一种行为型设计模式&#xff0c;又成为调停者模式&#xff0c;用一个中介对象来封装一系列的对象交互。中介者使各对象不需要显式地互相引用&#xff0c;从而使其耦合…

【Redis】Redis7学习笔记

系列文章目录 【Redis】Redis十大类型 【Redis】Redis持久化 【Redis】事务 【Redis】管道 【Redis】发布/订阅(Pub/Sub) 【Redis】复制(Replica) 【Redis】哨兵(sentinel) 【Redis】集群 Redis【Remote Dictionary Server&#xff08;远程字典服务器&#xff09;】是用…

CentOS 7 安装Jenkins2.346.1(war方式安装)

既然想要安装Jenkins&#xff0c;肯定是先要从官网解读所需环境配置信息&#xff0c;如需了解更多自行查阅 https://www.jenkins.io/doc/book/installing/linux/ JDK17&#xff0c;Maven3.9 安装 先从官网分别下载JDK17与Maven3.9 下载好之后上传至服务器、并解压&#xff1a…

澎湃算力 玩转AI 华为昇腾AI开发板——香橙派OriengePi AiPro边缘计算案例评测

澎湃算力 玩转AI 华为昇腾AI开发板 香橙派OriengePi AiPro 边缘计算案例评测 人工智能&#xff08;AI&#xff09;技术正以前所未有的速度改变着我们的生活、工作乃至整个社会的面貌。作为推动这一变革的关键力量&#xff0c;边缘计算与AI技术的深度融合正成为行业发展的新趋势…

控制欲过强的Linux小进程

控制欲强?视奸&#xff1f;普通人那才叫视奸&#xff0c;您是皇帝&#xff0c;天下大事无一逃过您的耳目&#xff0c;您想看什么就看什么&#xff0c;臣怀疑他在朋友圈私养兵士&#xff0c;囤积枪甲&#xff0c;蓄意谋反&#xff0c;图谋皇位啊&#xff01; 哈哈哈哈开个玩笑&…

正则表达式(Ⅰ)——基本匹配

学习练习建议 正则表达式用途非常广泛&#xff0c;各种语言中都能见到它的身影&#xff08;js&#xff0c;java&#xff0c;mysql等&#xff09; 正则表达式可以快读校验/生成/替换符合要求的模式的字符串&#xff0c;而且语法通俗易懂&#xff0c;所以应用广泛 学习链接&am…

git clone加速

gitte克隆法 1.复制链接 2.gitte新建仓库 3.导入 并将原来的目标的url输入 4.从gitte导入 git clone https://gitee.com/gsci-panda/infini-lm2

排序系列 之 快速排序

&#xff01;&#xff01;&#xff01;排序仅针对于数组哦本次排序是按照升序来的哦代码后边有图解哦 介绍 快速排序英文名为Quick Sort 基本思路 快速排序采用的是分治思想&#xff0c;即在一个无序的序列中选取一个任意的基准元素base&#xff0c;利用base将待排序的序列分…

(01)Unity使用在线AI大模型(使用百度千帆服务)

目录 一、概要 二、环境说明 三、申请百度千帆Key 四、使用千帆大模型 四、给大模型套壳 一、概要 在Unity中使用在线大模型分为两篇发布&#xff0c;此篇文档为在Python中使用千帆大模型&#xff0c;整体实现逻辑是&#xff1a;在Python中接入大模型—>发布为可传参的…

算法日记day 12(栈实现队列|队列实现栈|有效的括号)

队列是先进先出的&#xff0c;就像排队一样&#xff0c;谁在前谁先获得服务 栈是一种先进后出的数据结构 一、用栈实现队列 题目&#xff1a; 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作&#xff08;push、pop、peek、empty&#xff09;&#xf…

uniapp上传功能用uni-file-picker实现

文章目录 html代码功能实现css样式代码 html代码 <uni-file-pickerselect"onFileSelected"cancel"onFilePickerCancel"limit"1"class"weightPage-upload-but"file-mediatype"image"></uni-file-picker><imag…

飞睿智能UWB Tag蓝牙防丢器标签,宠物安全新升级,5cm精准定位测距不迷路

宠物早已成为许多家庭不可或缺的一员&#xff0c;它们用无条件的爱温暖着我们的心房&#xff0c;陪伴我们度过每一个平凡而温馨的日子。然而&#xff0c;随着宠物活动范围的扩大和外界环境的复杂多变&#xff0c;宠物走失的风险也随之增加。每一次出门遛弯&#xff0c;都像是心…

视频压缩文件太大了怎么缩小?怎么压缩视频大小?视频压缩方法:10个!(宝藏)

视频压缩文件太大了怎么缩小&#xff1f;让我看看是谁下班之后不是一手刷手机短视频&#xff0c;顺便葛优躺在沙发上的&#xff1f;互联网发展到现在&#xff0c;视频已成为我们生活中不可或缺的一部分。不管是视频录制还是视频缓存&#xff0c;视频文件体积越来越庞大&#xf…

微信小程序canvas 使用案例(一)

一、cavans 对象获取、上线文创建 1.wxml <!-- canvas.wxml --><canvas type"2d" id"myCanvas"></canvas> 2.js /*** 生命周期函数--监听页面加载*/onLoad(options) {const query wx.createSelectorQuery()query.select(#myCanvas).f…

DICOM CT\MR片子免费在线查看工具;python pydicom包加载查看;mayavi 3d查看

DICOM CT\MR片子免费在线查看工具 参考&#xff1a; https://zhuanlan.zhihu.com/p/668804209 dicom格式&#xff1a; DICOM&#xff08;Digital Imaging and Communications in Medicine&#xff09;是医学数字成像和通信的标准。它定义了医学图像&#xff08;如CT、MRI、X…