前言

这是一个关于 Vue 3.0 + TypeScript 的起步学习教程,适合完全的 Vue 新手和 Vue 2.0 的老手,在官方文档的基础上融入自己的一些实践经验。

编写原因

虽然很久之前就知道 Vue 3.0 的开发动态,但只基于 Beta 版本写了几个 demo 体验了一下 Composition API ,但由于当时资料太少(英文资料也很少),还是懵懵懂懂,所以很长时间都处于保守观望的状态。

直到 2020 年 9 月份中旬,随着海贼王版本(v3.0.0 One Pieceopen in new window)的正式发布,也有了相关生态(Vue / Router / Vuex 等等)的英文官网,觉得是时候正式用一下 3.0 了,刚好手里有一个工期不是很紧的项目,就开始尝试正式用 Vue 3.0 + TypeScript 来写业务。

毕竟,上手一个新技术栈最快的方法,就是一边 Reading 一边 Coding 。

在开荒的过程中,发现从测试到正式版本变化还是很大,很多过往的博文已经对不上了,还是踩了不少坑,所以在开荒过程中自己也打了不少笔记,免得以后自己遇到问题忘记怎么处理,慢慢的就整理成了这本教程,也可以供需要的朋友查阅。

到现在,自己团队里的新项目也都默认使用 Vue 3 + TypeScript 来开发了,不论是单人负责的小项目还是多人协作,开发过程都感觉很舒服!

官方资料

开始准备写这个栏目的时候,大概是 2020 年 10 月底,当时 Vue 3.0 和新版 Router 、新版 Vuex 的官网都没有中文版,一边看英文文档一边对着翻译踩坑,很多问题也只能在 GitHub Issue 或者 StackOverflow 查阅英文问答,说实话挺累的,不过还好后来中文版官网也陆续出来了,后面那阶段就舒服了不少,但很多实战中遇到的问题还是需要去 Google 。

本文档有汇总了 Vue 3.0 相关的官方文档的入口,可随时打开官网查阅。

点击查看:Vue 3.0系列相关官方文档

教程说明

开始执笔的时候就没有打算直译或者照搬官方的各种资料(尽管当时确实很稀缺),也没有打算用一个汇总的篇幅来总结版本升级带来的各种变化,因为很多人写了汇总文章了,而且我觉得那样一次性看完实际上也记不太住。

我主要是记录一些在构建项目过程中的问题点和解决方案,以及一些踩坑的地方,虽然官方说能够平滑升级,但在 Coding 的过程中发现问题还是不少,期间陆陆续续打了一堆笔记和代码片段,但零零散散的,借此机会整理起来,然后在合适的地方和 2.x 版本做一下对比,这样的学习效果我感觉会更好,记忆更深刻。

TIP

对于那些从 2.x 升级到 3.x 然后改变很大的章节,我会在侧边栏添加图标,如果对 2.x 版本已经很熟悉的情况下,可以针对带有图标的地方单独查阅。

注:当出现在二级标题时,说明这一节都是新的,如果只出现在三级标题,说明只有那一小部分变化比较大。

另外, 3.x 的优势其实是对 TypeScript 更完善的支持,所以从 3.x 开始我就直接写 TS 了,虽然说也是在入门,但代码这东西,光看文档也是憋得慌,还是得多写多练才能熟悉的快!

推荐一本我自己有在看的书:《深入理解TypeScript》open in new window ,我自己是在京东打折的时候买的纸质书,不过也有个在线版,可以进行在线查阅。

在拓展阅读的 教程工具 一节里,我也放了一些相关的拓展资源文档,有需要的话也可以查阅。

学习顺序

Vue 本身是个 “渐进式” 的框架,它可以只用最基础的组件来开发一个小项目,也可以把相关生态引入进来组合成一个大项目( e.g. Router 、 Vuex 、 Pinia … ),所以这个教程也是一个 “渐进式” 的教程,你可以从头一步步的看起,也可以在遇到具体问题的时候,只看对应的部分内容。

如果是从头看的话,推荐按照侧边栏的顺序来学,基本上就是一个项目在搭建过程中的一个开发顺序,你可以看到哪里,就在 demo 里把那部分的代码敲一遍,看看是否能够成功实现,如果 OK 了,就可以继续下一小节。

当然,如果你本身已经有 Vue 2 的基础,更好的学习方法就是拿一个简单点的基于 Vue 2 的老项目,比如一个活动页面,或者一个小工具,简简单单的小项目就可以,用 Vue 3 的方法实现一遍,看看能否还原出原来的功能。

就像我之前刚学 Vue 的时候,刚从 jQuery 这种操作 DOM 的开发模式,突然变成了 MVVM ,不习惯,不知道怎么入手,也是拿了一个以前的 jQuery 项目,用 Vue 实现,先把 datamethodrouter ,还有生命周期搞清楚,基本上做做普通的项目就没啥问题了。

疑惑解答

这是我第一次写此类文章,如果有什么我没说清楚,或者有误的,辛苦帮忙提出来,文章最后都添加了评论功能,关联到仓库的 issue,直接提交评论或者到仓库里提 issue / discussions 都可以。

也可以给我发送邮件 chengpeiquan@chengpeiquan.com

如果觉得对你有帮助,欢迎到仓库给个 Star 鼓励open in new window

版权许可

MIT License © 2020 chengpeiquanopen in new window