初探vue3.0笔记

Vue 3 刚出来那会儿，社区里最大的误会之一就是：Vue 3 和 Vue CLI 3.x / 4.x 不是一回事。CLI 是脚手架工具的大版本号，Vue 3 是框架本身。装 CLI 4 默认还可能创建 Vue 2 项目，要看创建时的选项。这篇只记我当时「先把 Vue 3 项目跑起来」的第一步。

tips: 请注意区分vue3.0和vue cli 3.x/4.x

创建项目

国内网络装依赖慢，创建时可以直接指定淘宝镜像源：

vue create -r https://registry.npm.taobao.org vue-next-test

交互式向导里选 Manually select features，勾上 TypeScript、Router 等你需要的即可。我那次选了带 TS 的模板，创建成功后 npm run serve，浏览器能打开默认页就算过关。

和 Vue 2 + TS 的差别

从 Demo 来看，单文件组件 + TypeScript 的写法跟 Vue 2 时期差别不大：defineComponent、props 类型声明、还是熟悉的味道。真正大的变化在 Composition API、setup、响应式底层换成 Proxy 等，要深入用才会明显感觉到。第一遍搭项目不用急着全学，先跑通、改改 HelloWorld，再去看官方迁移指南更踏实。

未完待续

当时只记了创建步骤，后面关于 ref / reactive、setup 语法糖、和 Vue 2 混用之类的问题，打算在实际项目里踩了坑再补。如果你也是刚上手，建议：先分清 CLI 版本和 Vue 版本，再建一个最小项目跑起来，比光看文章有效。

版权声明: 本文首发于 指尖魔法屋-初探vue3.0笔记（https://blog.thinkmoon.cn/post/881-notes-vue30-typescript-vue/） 转载或引用必须申明原指尖魔法屋来源及源地址！