# 前言

这是一个关于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。

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

# 官方资料

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

一边看英文版一边对着翻译踩坑,说实话挺累的,不过还好后来中文版官网也出来了(我也不知道啥时候发现的哈哈哈哈,不过至今Vue官网也还没有挂3.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) ,我自己是在京东打折的时候买的纸质书,不过也有个在线版,可以进行在线查阅。

# 疑惑解答

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

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

Last Updated: 1/23/2021, 10:10:16 AM