10. vue剩余功能总览

一、前言

本章可以说是vue3中最后的一点常用知识点总览了,如果以后有遗漏的内容,也会在本章、以及前面的章节中进行补充、细化。

vue常用的功能其实也就是前面九章的内容,有了前面的基础,现在你完全可以使用vue开发一些页面。

而本文的目的是将vue中常见的东西做一些解释、包括常见项目配置用法。

二、TypeScript

首先第一个就是TypeScript(简称ts),它是JavaScript(简称js)的进阶版本,与js的区别在于,它需要写数据类型、并且需要经过编译、成为js代码后才能被浏览器运行。

也就是说,ts本身是无法被浏览器直接运行的,必须要经过ts编译器编译成为js代码后才能用,这一点很重要。

因为js代码中没有数据类型,导致一个变量可以被当作任意类型的变量使用,这很容易出现问题。

比如一个函数正常来说需要接受两个数字参数、并还会一个数字结果,但由于js代码没有类型限制,此时即使你把对象当作参数传递进入函数中依旧没有问题,只是在运行后会出现问题,因为对象之间无法直接运行。

而一旦使用了ts,那么它在将代码编译成为js之前就会对你的代码进行检查,一旦发现该函数需要的是数字、而你传入的却是变量,就会直接报错、无法编译通过。

这可以让我们的代码更加安全,也正因如此,目前已经有大量的前端项目使用ts代码进行重构了。

手动配置ts本身是一件比较麻烦的事情,但创建vue的时候我们可以直接选择使用ts,vue会自动为我们配置好所有的内容,我们只需要使用即可:

image-20240123230213736

此时与不使用ts语法的vue项目相比,唯一的区别就是在每个script标签中都要添加一个lang属性,并且让lang="ts"

image-20240123230538261

然后就是此时代码的写法,一旦涉及到声明变量的地方,我们一般都需要为其注明类型,比如这里的函数参数a、b,就分别为其注明它们的类型均为数字类型。

此时如果你传入其它类型,那就会直接报错,你无法编译通过,这可以使得代码更加安全。

除此之外,ts代码和js代码并没有什么区别,主要麻烦的地方就是变量类型的问题,需要自己多多注意一下。

三、less

虽然vue中由于组件的原因,css代码已经好写了不少,但组件的内容一旦多了起来,写起来其实依旧是很难受的。

所以我们可以使用less来简化css的代码,还可以让我们的代码更加直观。

还有另外一个叫做scss,和less其实是差不多的东西,用的可能比scss多一点,但限制也更多。

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux