# 前言

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

# 编写原因

之前呢,因为 Vue 3.0 一直是测试版本,担心坑太多,只是简单跑了一下 DEMO 大概做了一下了解,但一直还在保守观望,没有敢用在公司的业务项目上。

自从 9 月中旬海贼王版本(v3.0.0 One Piece (opens new window))更新后,觉得是时候正式用一下 3.0 了,刚好手里有一个工期不是很紧的项目,就开始尝试正式用 Vue 3.0 + TypeScript 写业务了,毕竟熟悉一个东西最快的方法,就是一边 reading 一边 coding。

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

到现在,自己团队里的新项目也开始使用 3.0 来开发了,从日常小活动到新立项的项目管理系统,用 3.0 开发还是蛮舒服的!

# 官方资料

开始准备写这个栏目的时候,大概是 2020 年 10 月底,当时 3.0 的官网还没有中文版,而且在 Vue 的官网中文版首页也还找不到 3.0 的官网入口,默认还是 2.0 的。

一边看英文版一边对着翻译踩坑,说实话挺累的,不过还好后来中文版官网也出来了,后面就舒服了不少。

对应的 Vue RouterVuex 等相关生态工具也有所变化,但这些都还是只能阅读英文版,慢慢来吧,估计到官网正式推广 3.0 ,应该还有蛮长的一段路要走。

本文档有官方文档的入口,可随时打开官网查阅。

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

# 文档说明

并不打算直译或者照搬官方的各种资料,因为各个生态的官网迟早都会有中文版,何况现在通过 Google 翻译也问题不大,没什么必要。

也不打算总结版本升级带来的各种变化,因为很多人写了汇总文章了。

我主要是记录一些在构建项目过程中的问题点和解决方案,以及一些踩坑的地方,虽然官方说能够平滑升级,但在 coding 的过程中发现问题还是不少,期间陆陆续续打了一堆笔记和代码片段,但零零散散的,借此机会整理起来。

TIP

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

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

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

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

# 学习顺序

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

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

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

# 疑惑解答

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

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

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

# 版权许可

MIT License © 2020 chengpeiquan (opens new window)