那些好用的 Vue3 的工具搭子!!【送源码】

2020 年 9 月 18 日 Vue3 的正式发布已经过去了大约 3 年 9 个月左右!!!

随着 Vue3 版本的逐渐成熟,我们的前端世界也迎来了一系列令人振奋的更新工具。Vue 生态圈的持续扩大,无疑为前端开发人员带来了前所未有的便利。🎉👏

今天,就让我来为你揭秘 Vue3 开发过程中生态工具的最佳组合,助你一臂之力,快速开启项目新篇章!💪✨

脚手架

create-vue 是 Vue 官方推荐的项目初始化工具,用于快速搭建基于 Vue3 的项目,提供了一个简单快捷的方式来创建新的 Vue 项目

图片

安装:

npm create vue@latest

Github 仓库地址:https://github.com/vuejs/create-vue

TypeScript 语法支持

Vue3 完全支持 TypeScript,使得开发者可以在项目中享受到 TypeScript 提供的类型安全开发效率

图片

安装:

npm install typescript --save-dev

Github 仓库地址:https://github.com/microsoft/TypeScript

路由 vue-router V4

Vue Router V4 是官方的路由管理器,专为 Vue3 设计。它提供了一种声明式的方式来定义导航和页面路由,使得构建单页面应用(SPA)变得更加容易

图片

安装:

npm install vue-router@4

Github 仓库地址:https://github.com/vuejs/router

状态管理Pinia

Pinia 是 Vue 3 的官方状态管理库,它提供了一个直观类型安全的状态管理方式,并且易于与 TypeScript 集成。

图片

安装:

npm install pinia

Github 仓库地址:https://github.com/vuejs/pinia

另外推荐一款 Pinia 数据持久化插件:pinia-plugin-persistedstate,可以用来对 Store 中的数据做本地持久化存储

图片

npm i pinia-plugin-persistedstate

Github 仓库地址:https://github.com/prazdevs/pinia-plugin-persistedstate

构件工具 Vite

Vite 是 Vue3 官方推荐的前端构建工具,以其快速的热更新构建速度而闻名,极大提升了开发体验。

图片

npm create vite@latest

Github 仓库地址:https://github.com/vitejs/vite

Hooks 工具函数库VueUse

VueUse 是一个功能强大的 Vue.js 生态系统工具库,它提供了一系列的可重用的 Vue 组件函数,帮助开发者更轻松地构建复杂的应用程序。

图片

npm i @vueuse/core

Github 仓库地址:https://github.com/vueuse/vueuse

代码格式化工具 ESLint Prettier

ESLint 和 Prettier 的结合使用,帮助开发者维护代码质量风格一致性

ESLint:

一个开源项目,可帮助你查找和修复 JavaScript 代码中的问题。它内置于大多数文本编辑器中,你也可以在持续集成管道中运行 ESLint

图片

安装:

npm init @eslint/config@latest

Github 仓库地址:https://github.com/eslint/eslint

Prettier:

一个支持多种编程语言和编辑器的代码格式化工具,可以按保存键时自动格式化代码,节省时间和精力

图片

安装:

npm install --save-dev --save-exact prettier

Github 仓库地址:https://github.com/prettier/prettier

原子化 css UnoCSS

UnoCSS 是一个原子化 CSS 引擎,可以自动生成原子 CSS 类,减少 CSS 的冗余并提高开发效率。

图片

安装:

npm install -D unocss

Github 仓库地址:https://github.com/unocss/unocss

组件库

Element Plus:

基于 Vue 3 的 Element UI 组件库,提供了一套完整的 UI 组件。

图片

安装:

npm install element-plus --save

Github 仓库地址:https://github.com/element-plus/element-plus

Naive UI:

一个风格清新、易于使用的 Vue3 组件库,尤大大力荐。

图片

安装:

npm i -D naive-ui

Github 仓库地址:https://github.com/tusen-ai/naive-ui

调试工具

相信使用 Vue 的同学应该对 Vue Devtools 浏览器插件并不陌生,但是有些同学由于网络问题无法下载安装插件,所以今天给大家推荐一款更好用的插件

vite-plugin-vue-devtools

vite-plugin-vue-devtools插件,无需浏览器安装,直接使用 npm 安装即可使用,并且界面也很美观,功能更加强大。

图片

图片

安装:

npm add -D vite-plugin-vue-devtools

Github 仓库地址:https://github.com/webfansplz/vite-plugin-vue-devtools

混合开发 uniapp

uni-app 是一个使用 Vue 语法的跨平台开发框架,可以编译到 iOSAndroidWeb(包括 Vue3)等平台。

图片

图片

安装:

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

Github 仓库地址:https://github.com/dcloudio/uni-app

桌面端开发 Vite-electron

Vite-electron 是一个基于 Vite 和 Electron 的桌面应用开发框架,允许开发者使用 Vue3 开发桌面应用。

图片

安装:

npm i electron-vite -D

Github 仓库地址:https://github.com/alex8088/electron-vite

静态站点生成 VitePress

VitePress 是一个静态站点生成器,基于 Vue3 和 Vite,专为构建快速、以内容为中心的网站而设计。

图片

安装:

npm add -D vitepress

Github 仓库地址:https://github.com/vuejs/vitepress

服务端渲染框架 Nuxt

Nuxt 是一个基于 Vue 的框架,提供了服务端渲染(SSR)、静态生成(SSG)和 PWA 等功能,非常适合构建高性能的 Web 应用。

图片

安装:

npx nuxi@latest init <project-name>

Github 仓库地址:https://github.com/nuxt/nuxt

   ——EOF——

福利:

扫码回复【酒店】可免费领取酒店管理系统源码

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

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

相关文章

通过pycharm使用git和github的步骤

一、在Pycharm工具中配置集成Git和GitHub。 1.集成Git。 打开Pycharm, 点击File-->Settins-->Version Control-->Git 然后在 Path to Git executable中选择本地的git.exe路径。如下图&#xff1a; 2.集成GitHub 打开Pycharm, 点击File-->Settins-->Version…

探索未来远程调试新纪元——《串口网口远程调试软件》:无缝连接,高效调试

文章目录 前言一、无缝连接&#xff0c;突破距离限制二、高效调试&#xff0c;提升工作效率三、安全可靠&#xff0c;保护数据安全四、用户友好&#xff0c;简化操作流程五、软件地址六、远程调试软件 七、基本操作1、订阅主题2、连接3、串口调试4、网口调试 八、软件地址结束语…

PO模式登录测试

项目实践 登陆项目测试 get_driver import page from selenium import webdriverclass GetDriver:driver Noneclassmethoddef get_driver(cls):if cls.driver is None:cls.driver webdriver.Edge()cls.driver.maximize_window()cls.driver.get(page.url)return cls.drivercl…

Java高风险漏洞与修复之——LDAP injection(LDAP注入)

LDAP注入介绍 LDAP注入是一种攻击技术,它可以利用应用程序中的安全漏洞对LDAP(轻量级目录访问协议)服务进行恶意查询或修改操作。当应用程序未能适当地清理用户的输入内容,将其嵌入到LDAP查询中时,就可能发生LDAP注入。攻击者通过注入未经授权的指令或条件来操纵查询结果…

【代码随想录训练营】【Day 66】【图论-3】| 卡码 101-104

【代码随想录训练营】【Day 66】【图论-3】| 卡码 101-104 需强化知识点 103&#xff0c;104 优化思路 题目 101. 孤岛的总面积 此处 area 多余 def dfs(grid, x, y, area):dirs [[0, 1], [0, -1], [1, 0], [-1, 0]]m, n len(grid), len(grid[0])area[0] 1grid[x][y] …

k8s学习笔记——k8s升级

前一段时间&#xff0c;由于搭建k8s集群的硬件设备故障&#xff0c;老化导致k8s需要重装。使用原来的kubeadm安装方式却发现装不了了。查了一下官方文档&#xff0c;说从v1.24版本之后&#xff0c;kubelet移除了容器引擎&#xff0c;容器及镜像管理将有第三方工具来接管&#x…

Vue.js有哪些优点和缺点

Vue.js 作为一个流行的前端框架&#xff0c;具有许多优点和一些潜在的缺点。以下是 Vue.js 的一些主要优点和缺点&#xff1a; 优点&#xff1a; 轻量级和灵活性&#xff1a;Vue.js 的核心库专注于视图层&#xff0c;这使得它非常轻量级&#xff08;压缩后只有几十KB&#xff…

Web 反爬指南

本质上说&#xff0c;防抓的目的在于增加脚本或机器获取你网站内容的难度&#xff0c;而不要影响真实用户的使用或搜索引擎的收录 不幸的是这挺难的&#xff0c;你需要在防抓和降低真实用户以及搜索引擎的可访问性之间做一下权衡。 为了防爬&#xff08;也称为网页抓取、屏幕…

智谱AI: ChatGLM API的使用

一、获取API 1、打开网址&#xff1a;智谱AI开放平台 注册账号登录 2、登录&#xff0c;查看API key (注册后赠送100万token&#xff0c;实名认证后多赠送400万, 有效期一个) 二、安装及调用 安装质谱SDK pip install zhipuai调用方式 流式调用 from zhipuai import ZhipuA…

开放签电子签章,让签字有迹可循

开放签&#xff08;企业版&#xff09;V2.0.5版本上线后&#xff0c;系统支持一键查询电子文件的签署操作记录&#xff0c;支持一键生成详细的签署记录报告&#xff0c;详细请看下图&#xff1a; 1、操作记录详情&#xff1a; 从合同发起、填写、签署、撤销等环节全流程展示操…

【Linux从入门到放弃】探究进程如何退出以进程等待的前因后果

&#x1f9d1;‍&#x1f4bb;作者&#xff1a; 情话0.0 &#x1f4dd;专栏&#xff1a;《Linux从入门到放弃》 &#x1f466;个人简介&#xff1a;一名双非编程菜鸟&#xff0c;在这里分享自己的编程学习笔记&#xff0c;欢迎大家的指正与点赞&#xff0c;谢谢&#xff01; 进…

常见反爬及应对

一&#xff0c;特殊混淆的还原 1.1 还原 AAEncode 与 JJEncode AAEncode是一种JavaScript代码混淆算法&#xff0c;利用它&#xff0c;可以将代码转换成 颜文字 表示的JavaScript代码。 去掉代码最后的 (‘‘)&#xff0c;这是函数的自调用&#xff0c;去除后就是函数的声明…

【CSharp】定义结构体并指定字段对齐

【CSharp】定义结构体并指定字段对齐 1.背景2.代码3.分析1.背景 在 C# 中可以通过 StructLayout 属性来定义结构体并指定字段对齐方式。 在 C# 中,内存对齐是指数据在内存中的排列方式,使用StructLayout 特性用于控制结构体的内存布局。其特性可以指定字段的内存排列顺序(例…

【揭秘】国内十大顶尖AI大模型,引领智能科技新纪元

大模型大模型通常指的是参数量非常大、数据量也非常大的深度学习模型。这些模型由数百万到数十亿甚至更多的参数组成&#xff0c;需要海量的数据和强大的计算资源进行训练和推理学习的模型。大模型设计的目的在于提高模型的表示能力和性能、应对复杂数据集和任务、提升泛化能力…

6、限界上下文:定义领域边界的利器

在DDD限界上下文&#xff1a;定义领域边界的利器领域建模和微服务建设过程中&#xff0c;会有很多项目参与者&#xff0c;包括领域专家、产品经理、项目经理、架构师、开发经理和测试经理等。对于同样的领域知识&#xff0c;不同的参与者可能会有不同的理解。而且有的时候同一个…

嵌入式学习——硬件(Linux系统在2440上的启动)——day57

1. Linux2.6系统在s3c2440上的启动过程分三个阶段 1.1 启动u-boot 1.2 启动Linux内核 1.3 挂载根文件系统 2. bootloader 2.1 定义 bootloader的本质是一个裸机程序&#xff0c;bootlood专门是为了能够正确地启动linux操作系 统&#xff0c;在系统初上电时需要对系统做一些…

BK145FRC10HSK、BK165FRC10HSK电液比例开环控制变量泵放大器

BK15FRC10HAK、BK35FRC10HAK、BK45FRC10HAK、BK55FRC10HAK、BK70FRC10HSK、BK80FRC10HSK、BK90FRC10HSK、BK100FRC10HSK、BK120FRC10HSK、BK145FRC10HSK、BK165FRC10HSK、BK180FRC10HSK电液比例开环控制柱塞泵主要是在传统的液压泵基础上&#xff0c;增加了电液比例控制先导阀。…

从零开始实现大语言模型(二):文本数据处理

1. 前言 神经网络不能直接处理自然语言文本&#xff0c;文本数据处理的核心是做tokenization&#xff0c;将自然语言文本分割成一系列tokens。 本文介绍tokenization的基本原理&#xff0c;OpenAI的GPT系列大语言模型使用的tokenization方法——字节对编码(BPE, byte pair en…

重采样(上采样或下采样)是什么?

重采样&#xff08;Resampling&#xff09;是在数据处理中常用的一种技术&#xff0c;主要用于处理数据集中的不平衡问题。具体来说&#xff0c;重采样可以分为上采样&#xff08;Oversampling&#xff09;和下采样&#xff08;Undersampling&#xff09;&#xff0c;它们分别是…

【bug报错已解决】ERROR: Could not find a version that satisfies the requirement

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言一、问题描述1.1 报错示例1.2 报错分析 二、解决方法2.1 方法一2.2 方法二 三、总结 引言 有没有遇到过那种让人…