前端新手小白的Vue3入坑指南

昨天有同学说想暑假在家学一学Vue3,问我有没有什么好的文档,我给他找了一些,然后顺带着,自己也写一篇吧,希望可以给新手小白们一些指引,Vue3欢迎你。

目录

1 项目安装

1.1 初始化项目

1.2 安装初始化依赖

1.3 启动项目 

2  一定会用的第三方库

2.1 js-tool-big-box

2.2 less或者sass预处理器

2.3 axios请求库

2.4 UI库


1 项目安装

这里我们推荐Vite安装,Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目:

1.1 初始化项目

npm init vite-app js-tool-big-box-webiste

上面的命令是说呢,我们想通过vite创建一个名为 js-tool-big-box-webiste 的项目。在控制台终端输入命令后,有提示,我们输入 “y”  即可。

如上图安装完成后,你所执行的电脑目录下面会有对应的项目文件,如下图:

1.2 安装初始化依赖

我们刚才创建了新项目( js-tool-big-box-website ),那么项目中就生成了以这个项目名为名字的文件夹,通过终端,进入到这个目录的环境下,执行以下命令:

cd js-tool-big-box-website

然后安装初始化依赖

npm install

 如下图所示,已经安装完成:

而我们的文件夹下也生成了 node_modules 依赖目录,如下图所示:

1.3 启动项目 

使用vite创建项目后,启动项目是非常快速的,如闪电般的速度,执行下面的命令:

npm run dev

启动成功后,可以在终端看见如下界面: 

如上图所示,可以使用其中任意一个url,然后复制,粘贴到浏览器,就可以打开项目了:

 

2  一定会用的第三方库

项目安装完成以后呢,就要着手项目开发了。正所谓工欲善其事,必先利其气。在项目开发之前,我们先说几个,前端项目开发中,一定会用到的第三方库。用了这几个第三方库呢,可以帮我们开发更高效

2.1 js-tool-big-box

js-tool-big-box几乎是前端开发项目,必用的一个npm库,他的功能丰富,使用便捷,可以让前端开发及其高效。目前他的功能包括但不限于:

时间日期转换、

cookie的存取、

localStorage的存取、

防抖节流的快捷应用、

number和字符串的常用方法封装、

一些日常的正则匹配验证、

复制文字到剪贴板、

生成UUID、

数组去重、

隐藏关键字符串中间字符、

获取详细数据类型、

检测密码强度、

下载文件、

打开全屏、

发送Jsonp跨域请求、

获取浏览器详细信息等

学习文档:js-tool-big-box学习文档 

2.2 less或者sass预处理器

传统的css编写方式比较低端,使用less或者sass这种预处理器,可以让CSS开发高效起来,非常推荐使用。

less学习文档:less学习文档

2.3 axios请求库

一般项目都会涉及到与服务端交互,而这个时候你可以使用axios发送请求。

axios学习文档:axios学习文档

2.4 UI库

针对Vue3,如果是C端开发呢,我们还是希望可以手写一些比较轻量级的UI库,但如果是B端呢,我们推荐Element Plus。

学习文档:一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

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

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

相关文章

redis哨兵模式下业务代码连接实现

目录 一:背景 二:实现过程 三:总结 一:背景 在哨兵模式下,真实的redis服务地址由一个固定ip转变为可以变化的ip,这样我们业务代码在连接redis的时候,就需要判断哪个主redis服务地址,哪个是从…

火绒安全删除explorer.exe文件造成windows系统异常的问题

问题 过程是这样的,电脑在使用过程中突然就变成了黑色的,任务栏、桌面等都消失了,只有部分程序的窗口。具体如下: 因为,在变化的时候,我有瞟到一眼有个火绒的气泡消息,就感觉是火绒错误的删除…

适用于Mac的免费外置硬盘数据恢复软件

“我有一个 1 TB 的外置硬盘,它被意外格式化了。我尝试从中恢复丢失的数据。我把它连接到我的Mac,但里面什么也没找到。我正在寻找适用于Mac的免费外置硬盘数据恢复软件,例如奇客数据恢复Mac版或其他Mac数据恢复免费软件来扫描它并恢复数据。…

如何有效地进行机台数据管理,让数据发挥更大的价值?

机台数据管理是一个涉及收集、存储、分析和保护与机台(可能是机械设备、生产线设备、医疗设备等)相关数据的过程。通常包括以下几个方面: 1.数据收集:使用传感器和数据采集系统来收集机台的性能数据,如温度、压力、速…

Python轻松设置Excel单元格数字显示格式

Excel作为强大的数据处理与分析工具,不仅能够存储大量数据,还支持复杂的数据处理与可视化功能。而如何恰当地展示Excel表格中的数据是Excel文件制作的关键之一。这便涉及到Excel单元格数字格式的设置。数字格式不仅关乎数据的美学呈现,如货币…

【Sa-Token|4】Sa-Token微服务项目应用

若微服务数量多,如果每个服务都改动,工作量大,则可以只在网关和用户中心进行改动,也是可以实现单点登录的。 这种方式可以通过在网关服务中生成和验证 Sa-Token,并将其与现有的 Token关联存储在 Redis 中。用户中心提供…

arsetryhtehrwgefwadasdadasd

驱动项目 https://github.com/wqreytuk/article/blob/main/agsdygasidgasuidgoGx64_ASM_Kernel_Mode-main.7z 48b91400000080f7ffff48b8bd427ae5d594bfd6488b0948f7e148b8cdcccccccccccccc48c1ea1748f7e24c8bea49c1ed02 直接在windbg中把执行内存修改为上面这一串字节序列&am…

Java开发环境配置

一、JDK 下载JDK:Java Downloads | Oracle 配置环境变量:09、Java入门:Path、JAVA_HOME环境变量配置_哔哩哔哩_bilibili 二、IDEA 下载IDEA: Download IntelliJ IDEA – The Leading Java and Kotlin IDE (jetbrains.com) 建…

【Sa-Token|3】Sa-Token集成到现有微服务详细介绍

一、系统架构调整 用户中心:保持现有的用户登录、注册接口不变。多个项目:前后端分离,保持现有逻辑不变。网关服务:新增或配置网关服务,处理所有请求并进行 Token 校验和转发。统一 Token 管理:通过 Sa-Tok…

Kafka多维度调优

优化金字塔 应用程序层面 框架层面(Broker层面) JVM层面 操作系统层面 应用程序层面:应当优化业务代码合理使用kafka,合理规划主题,合理规划分区,合理设计数据结构; 框架层面:在不…

俄罗斯塔斯社TASS 媒体投放报道:海外媒体发稿扭转战局

大舍传媒 -作为一家颇具影响力的媒体机构,一直致力于传播客观、真实的新闻信息。最近,大舍传媒注意到了塔斯社TASS的报道,了解到海外媒体发稿对于扭转国内局势有着重要的影响。本文将就此话题进行分析探讨。 塔斯社TASS:俄语区最…

transformer之位置编码

由于 Transformer 模型中自注意力模块具有置换不变性,因此仅使用注意力机制无法捕捉序列中的顺序关系,从而退化为“词袋模型”。为了解决这一问题,需要引入位置编码(Position Embedding, PE)对于序列信息进行精确建模,从而将绝对或相对位置信息整合到模型中。 什么是位置…

Excel 组内多列明细拼成一行

某表格有 1 个分组列和 2 个明细列。 ABC1ObjectNameInfo212AGggtz44456312AGggtr99987412AKkkio66543512ABbvgf66643612AVvvhg888765712AFffgt8786FGggtf23232596FXxxde44321610P23Cccvb554328711P23Vvvbj565656412P23Sswec898976413P23Llloiu343432 现在要把组内的多列明细…

在ubuntu中恢复误删除的文件

1、安装 TestDisk 在 Ubuntu 上,可以使用以下命令安装 TestDisk: sudo apt-get install testdisk2、查询你删除的文件所在那个分区 #查询分区 df -h #我这里是/dev/sda2 #也可以使用下面命令查看具体哪个分区 lsblk3、查询该分区是什么系统类型 sudo …

数据库系统概论(个人笔记)(第四部分)

数据库系统概论(个人笔记) 文章目录 数据库系统概论(个人笔记)4、中间的SQL4.1 连接表达式4.2 视图4.3 事务4.4 完整性约束4.5 SQL数据类型和模式4.6 SQL中的索引定义4.7 授权 4、中间的SQL 4.1 连接表达式 Join Expressions Join…

计算机网络:网络层 - 路由选择协议

计算机网络:网络层 - 路由选择协议 路由器的结构路由选择协议概述自治系统 AS内部网关协议路由信息协议 RIP距离向量算法RIP报文格式收敛问题 开放最短路径优先 OSPF基本工作原理自治系统分区 外部网关协议BGP-4 路由器的结构 如图所示,路由器被分为路由…

PostgreSQL的学习心得和知识总结(一百四十五)|深入理解PostgreSQL数据库之ShowTransactionState的使用及父子事务有限状态机

目录结构 注:提前言明 本文借鉴了以下博主、书籍或网站的内容,其列表如下: 1、参考书籍:《PostgreSQL数据库内核分析》 2、参考书籍:《数据库事务处理的艺术:事务管理与并发控制》 3、PostgreSQL数据库仓库…

mac怎么压缩pdf文件,苹果电脑怎么压缩pdf文件大小

在当今数字化时代,PDF文件已成为广泛使用的文档格式之一。然而,PDF 文件可能会因其包含的图像、图形和其他元素而导致文件较大,这可能会影响文件的传输、存储和共享。因此,对 PDF 文件进行压缩以减小其文件大小是很有必要的。今天…

【机器学习 复习】第3章 K-近邻算法

一、概念 1.K-近邻算法:也叫KNN 分类 算法,其中的N是 邻近邻居NearestNeighbor的首字母。 (1)其中K是特征值,就是选择离某个预测的值(例如预测的是苹果,就找个苹果)最近的几个值&am…

OCC异常处理机制理解

1.目的 异常处理提供了一种将控制权从正在执行的程序中的给定点转移到与先前执行的另一点关联的异常处理程序的方法。在各种错误条件下引发异常,该异常会中断其正常执行并将控制权传递给捕获此异常的处理程序,以保护软件质量。OCC作为开源的几何算法库&…