Vue3.0全家桶最全入门指南 – 快速搭建 (1/4)

Vue 3.0 当时已进入 Release Candidate：API 基本冻结，只修 bug，没有大问题就不会再改功能。 本篇是全家桶入门的第 1/4，只做一件事：用最新 vue-cli 快速搭好 Vue 3 项目。正式版之后这些步骤仍然通用，截图对应 2020 年的 CLI 界面。

为了照顾 2.x 升级，3.x 兼容大部分 Options API（data、methods、computed、watch、生命周期等），但不是无缝。有些改动要手改，升级成本被降低，并没有降到零。

系列目录：

• Vue3.0全家桶最全入门指南 – 快速搭建 (1/4)
• Vue3.0全家桶最全入门指南 – vue3.0新特性 (2/4)
• Vue3.0全家桶最全入门指南 – vue-router@4.x和vuex@4.x (3/4)
• Vue3.0全家桶最全入门指南 – 3.x跟2.x的其他差异 (4/4)

一、六大亮点

• Performance：用 Proxy 做响应式，比 Object.defineProperty 逐属性遍历更高效；Virtual DOM 只 diff 动态部分，加上事件缓存。
• Tree-Shaking Support：3.x 支持按需导入，不必整包 Vue 打进去。
• Composition API：组合式 API，更偏函数式组织逻辑。
• Fragment、Teleport、Suspense：多根节点碎片、传送门、悬念，设计上参考了 React。
• Better TypeScript support：2.x 早期没按类型推导来设计；3.x 弱化组件里的 this，普通变量和函数对 TS 更友好。
• Custom Renderer API：自定义渲染器。

本文示例版本：

"@vue/cli": "^4.4.6"
"vue": "^3.0.0-rc.9"
"vue-router": "^4.0.0-beta.7"
"vuex": "^4.0.0-beta.4"

二、安装 / 升级 Vue CLI

掘金用户 @Web默默 提醒：vue-cli@4.5.4 已能直接创建 Vue 3 项目。GitHub 发布记录里 4.5.0 就开始支持，并且带 TypeScript。 为少踩坑，建议升到当时最新的 4.5.4（截至 2020-09-05）。仓库：github.com/vuejs/vue-cli。

全新安装

npm install -g @vue/cli

已安装则升级

npm update -g @vue/cli
vue -V

三、创建 Vue 3 项目

vue create vue3-test

预设里选 Manually select features（手动选择）：

按需要勾选功能。不熟 TypeScript 可以不选；单元测试同样按项目决定：

下一步选 3.x (Preview)：

后面的 ESLint、仓库位置等按自己习惯即可：

两步走完，Vue 3 项目就起来了。下一篇看 3.x 怎么用、2.x 怎么迁。

作者：j2ime；链接：https://juejin.im/post/6867114456762679309。

一句话总结：先把 CLI 升到能创建 3.x 的版本，再手动选 features 并勾选 3.x Preview，Vue 3 工程就能跑起来。