前言 ​

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

编写原因 ​

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

直到 2020 年 9 月份中旬，随着海贼王版本（v3.0.0 One Piece）的正式发布，也有了相关生态（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 版本做一下对比，这样的学习效果我感觉会更好，记忆更深刻。

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

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

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

学习顺序 ​

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

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

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

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

疑惑解答 ​

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

也可以给我发送邮件 [email protected]

如果觉得对你有帮助，欢迎到仓库给个 Star 鼓励。

版权许可 ​

MIT License © 2020 chengpeiquan