2022年学习Vue的姿势

·  阅读 1748
2022年学习Vue的姿势

本文主要是根据我个人的学习路线来说的,可能有一些不足,如果有缺陷请大佬们指出

其次我个人是比较追求最新技术栈的,对于我个人来说,最新的东西会带给我学习探索的动力

基础三大件

​ 毫无疑问,HTML、CSS、JavaScript是前端无论是学习还是工作都必不可缺少的基础知识,这里推荐MDN文档,里面的知识都比较全面和新颖,算是比较公认权威的一个文档

image-20211228132846242.png

​ 但是MDN的学习的偏理论文档的,这里我推荐一个实战网站freeCodeCamp,它提供了丰富的实践课程,从基础页面布局到js算法和数据结构,再到Bootstrap、Jquery、Sass、React等前端常用开发库,而且全部课程都是免费的!相当的良心,如果能够跟着freeCodeCamp学完全部章节再配合MDN文档,我觉得就能够基本入门前端了

​ 当然学不完也没有关系,我觉得也不用一口气吃成胖子,Vue的优势就是渐进式学习,可以先学习三大件的基本知识后,直接上手Vue,在遇到瓶颈的时候,回来查漏补缺,会更有收获!

Vue.js

​ 那么接下来就是我们的主角Vue了,Vue这几年无论国内还是国外,发展都非常迅猛,势头正好,生态也逐渐完善。当然React依旧是目前大厂的首先,当我觉得Vue相比较更适合入门前端,等把Vue这一套弄明白后,在自己的知识库里构建一套前端开发的思维,再学React也会比较容易。

​ 首先肯定是官方文档Vue.org啦!当在上手官方文档时,主要得明白,Vue、React等这些框架出现的意义,解决了传统前端开发的什么痛点?一个框架的流行,就是让开发者觉得使用起来非常爽才流行的啊。

image-20211228143928372.png

​ 这里我说一下我个人的理解。

​ 在以前前后端不分家的时候,前端代码中混杂着php、java模板代码,没有前后端交互的概念,由后端根据模板生成html代码给客户端,后面ajax的出现,前端可以通过异步请求后端接口的数据,使得php、java代码从html中移除,但这个时候前端代码还是包括在一个php项目中的template或者ssm项目的webapps目录中,随着页面复杂度的提升以及单页面的流行,前端项目开始独立出来,这个时候就是各种前端框架的天下了,node.js以及webpack的出现使得前端可以独立运行在一个服务上。

​ 但我们必须回到前端的本质,就是获取后台数据,数据展示以及处理用户输入等,如果数据量一大,对于页面渲染以及数据的绑定逐渐复杂,所以Vue以及React这些就是围绕这么解决前端开发的这些痛点来解决,这里说说Vue,Vue的特点有双向数据绑定、虚拟DOM,双向数据绑定就是解决了传统前端开发中数据响应的痛点,通过双向数据绑定,页面展示数据跟js保存的对象变量绑定,其中一个数据的更改相对应的另一个数据也会更改,这样就能够极大地方便我们开发,再者通过虚拟DOM,会在页面需要重新渲染时,通过diff算法只渲染修改的部分,从而提高页面的渲染速度,而在传统的开发中,有时候只需要更新页面一小部分的却使整个页面都重新渲染了。

​ 我可能说的逻辑不太清晰,具体还是要自己上手了才能体会。

​ 当然这里我还推荐正在测试中的新官方文档The Progressive JavaScript Framework,这个文档更加新颖,然后里面的教程会提供Options和Composition两种选项,相比现在的文档更现代,不过还没有中文翻译。这里要提醒的一点是,Vue现在又两个大版本就是Vue2和Vue3,Vue3是兼容Vue2的写法的,虽然在入门的时候Vue2可能会比较容易理解,因为Options API看起来更加清晰明了,但Vue3是未来,以后的生态都是围绕Vue3以及Composition API来构建的,对于我来说,Vue3能够提供更好的TypeScript以及FP(函数式编程)支持是我中意的点,所以直接上手Vue3也不是不行。

image-20211228143902602.png

vite

​ 要说vue生态中比较出圈的,就是vite了。

image-20211228160911924.png

​ vite是下一代前端开发与构建工具,为什么需要这类工具呢?随着前端的发展,我们可能很少会去写原生的HTML、CSS、JavaScript文件,可能是TypeScript、Sass、vue这类扩展文件来提高我们的开发效率。但是浏览器它就只能运行最基本的三大文件呀。所以我们需要打包工具将我们开发时的这写扩展文件类型打包编译成最原始的文件,而目前最广泛使用的打包工具就是webpack,而vite是Vue的作者我们的尤大开发的基于原生ESM的开发工具。其实在生产打包时两者差别不大,但是vite在开发时带来的体验是超过webpack的,你要想,在开发时我们肯定是需要用到实时浏览服务的,就是你调整代码的同时可以查看页面效果,叫做热重载,而当项目越来越大时,webpack热重载会越来越慢,但vite则无论应用程序大小如何,都始终极快的模块热重载

​ 所以vite不仅适用于vue,也适用于其他react、svelte框架等,当然对于亲儿子Vue的支持是最好的。下面要讲的Vue开发脚手架基本都是使用vite作为构建工具的,而github上最新的Vue项目基本也是基于vite的,所以很有必要过一遍官方文档,了解vite的基本配置以及使用。

脚手架

​ 如果你通过看b站的视频来学习Vue的话,他们通常都会使用Vue CLI脚手架来新建一个Vue项目

image-20211228162248627.png

​ 但是Vue CLI创建的项目都是基于webpack,而且配置选项也比较老(仅个人意见),所以这里推荐官方的新脚手架create-vue,通过npm init vue@latest命令进行初始化

image-20211228162659711.png

​ create-vue默认使用vite,提供的选项都是比较新的,比如状态管理为Pinia而不是Vuex,包括组件测试端对端测试工具Cypress

​ 在官方的新文档中的快速开始中,已经使用create-vue替代了Vue CLI

image-20211228163220406.png

​ 这里我还推荐一个开源大佬antfu的一个vite启动模板vitesee,它在GitHub上有3k的小星星,是最受欢迎的vite模板,使用的技术栈都是非常新的,对于学习vue生态的最新发展很有帮助。

image-20211228165633751.png

路由管理

​ 现在的前端页面为了提高用户体验,基本都是使用单页面应用(SinglePage Web Application,SPA)。只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次,常用于PC端官网、购物等网站。

​ 而在Vue中为了方便地开发单页面应用,我们需要使用到路由管理工具来帮助我们实现页面跳转和路由参数传递。在Vue生态中路由管理工具没有像React那么多,直接使用官方路由工具vue-router即可。

image-20211228164109375.png

​ 注意vue-router有3和4两个版本,Vue3更适合使用vue-router@4,它提供了使用Vue3使用的相关Composition API。

状态管理

​ 什么是状态管理呢,你可以把它理解为前端页面中的数据库,用于统一存放我们一个前端应用使用到的数据。但其实这个比喻有待商酌,因为并不是所有数据都需要存放到“数据库”中,在Vue3中更不需要,因为Composition API的存在,我们可以把单个数据以及数据相关的函数组合在一起,如果把数据从其中剥夺出来会影响代码结构。

Vuex在是Vue官方的状态管理工具,但是其对于TypeScript的支持较为一般以及随着Vue3的出现,开发者对于代码的简洁要求越来越高,所以Vuex显然不受到开发者的青睐,而Pinia是Vuex团队成员开发的轻量级状态管理工具,这之前我就写个一篇文章来介绍了Pinia这个工具《Vue状态管理:使用Pinia代替Vuex》

​ 而在上面提到的官方新脚手架create-vue中,就默认了使用Pinia作为状态管理工具

image-20211228165633751.png

TypeScript

​ TypeScript对于现在的前端的重要性不言而喻,Vue3相较于Vue2一个比较大的改动就是Vue3使用TypeScript进行了重构,从而更好地支持TypeScript。

​ 那什么是TypeScript?

​ 简单来说就是多了type(类型)的Javascript,我们都知道Javascript是一种弱类型语言,一个变量可以重复赋予各种类型的字面值,这使得在开发过程中经常遇到类型出错的bug,使用Typescript的目的是为了尽早地发现代码中的类型错误,而TypeScript与编辑器有更紧密的集成,它能够提供更好的语法补全和检查,基本上现有的前端工具都提供了TypeScript支持或者说使用TypeScript来编写。

​ 都2022年了,还不学TypeScript嘛!

​ 这里推荐冴羽大佬翻译的TypeScript官方手册

image-20211228170807847.png

原子化CSS

​ 原子化CSS已经在前端开发中越来越受欢迎,这类框架有Tailwind CSS、Windi CSS、UnoCSS,关于原子化CSS我之前也写过一篇相关文章《来试试antfu大佬的原子化CSS构想——UnoCSS》。在2021CSS年度报告中,对于CSS框架满意度最高的框架已经连续几年被Tailwind CSS蝉联

7c1cbca09a004a1c88d3b76299262965_tplv-k3u1fbpfcp-watermark (1).jpg

​ 前段时间Tailwind CSS官方也发不了Tailwind CSS v3.0,加入了JIT引擎,多栏布局等新特性,帮助我们更快速地构建一个美观的页面

​ 当然使用原子化CSS这类框架无疑会增加学习成本,我们在开发时不得不边翻阅官方文档边写代码,这其中的利弊就需要自己去斟酌的,需要自己上手开发体验,才知道自己适不适合。

Vue组件库

​ 使用组件库可以帮助我们快速开发业务(拒绝重复造轮子),Vue3的组件库主流有

  • Element Plus:老牌Vue组件库Element UI的Vue3版本
  • Ant Design Vue:React优秀组件库Ant Design的Vue版本
  • Naive UI:使用TypeScript编写,文档很幽默,个人非常喜欢
  • arco design:字节跳动前段时间开源的一款组件库,风格比较清爽
  • vant:有赞前端团队开源的移动端组件库,Vue主流移动端组件库之一
  • NutUI:NutUI 是京东风格的 Vue 移动端组件库,开发和服务于移动Web界面的企业级产品

​ 这么多组件库并不需要深入去学习的,在业务开发的时候根据需要引入即可

VueUse

​ Vue3的Composition API给我们带来了代码复用性的提升,跟React中丰富的hooks库类似,在Vue中使用hooks库可以方便我们开发(拒绝重复造轮子),而VueUse是Github上7k小星星的hooks库,提供了Vue开发中常用的工具集。

image-20211228180239438.png

Vue应用框架Nuxt.js

Nuxt.js是Vue主流的应用框架、SSR(服务端渲染)框架,有尤大亲自直播带货,在GitHub上有将近40k的小星星。

image-20211228190314370.png

​ 那么有了Vue为什么还要Nuxt呢,Nuxt提供了更加快速的开发体验,开箱即用的目录路由,多种渲染模式支持,能够配合异步数据获取来渲染页面,提高网页应用的SEO(搜索引擎优化)。

​ 前段时间Nuxt3的发布备受关注,提供了非常多的新特性,包括Vue3、vite、原生Typescript的支持,新的服务器引擎Nitro。

END

​ 以上就是我对于Vue学习过程中的一些分享,当然,要去做一个项目只有上面这些知识是不够的,还有比如代码格式化、代码风格统一、多语言国际化、测试工具等相关。

​ 保持对编程的热爱,拥抱开源,不断探索吧!

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改