Vue 3 全家桶完全指南与实战：TypeScript、Vue Router、Pinia 与 Vuex

Hi！欢迎来到《Vue 3 全家桶完全指南与实战》这门课程。

这是一门系统学习 Vue 3 的中文实战课程，适合已经掌握 HTML、CSS 和 JavaScript，希望进一步学习 Vue 3 并能够独立完成实际项目开发的同学。

课程从 Vue 3 基础开始，完整覆盖 Options API、Composition API、TypeScript、Vue Router 4、Pinia、Vuex 4，以及组件设计、状态管理、HTTP 请求、响应式系统、Virtual DOM 等 Vue 开发中的核心内容。

课程中包含大量示例和实战小项目，目标是让你不仅记住 API，更能建立完整的 Vue 3 开发思路，理解这些技术在真实项目中应该怎样使用。

我是张旭乾，也是 B 站「峰华前端工程师」的主理人，同时是《JavaScript 基础语法详解》一书的作者。我曾在美国 Stevens Institute of Technology 学习计算机科学，并有多年 Web、后端和移动端开发经验。

我一直比较重视两件事：一是把知识讲清楚，二是尽量减少没有必要的学习成本。所以这门课不会单纯追求时长，而是希望用比较紧凑的节奏，把真正需要掌握的内容讲完整、讲明白。

你只需要熟悉 HTML、CSS 和 JavaScript，就可以开始学习。

主要内容包括：

• Vue 3 基础、进阶和高级用法

• Options API 与 Composition API

• 组件设计与复用

• 响应式系统与双向绑定

• Virtual DOM 等核心原理

• HTTP 请求与异步数据处理

• Vue Router 4

• Vuex 4

• Pinia

• TypeScript 在 Vue 项目中的应用

• 多个实战示例和小项目

课程同时包含 Vuex 4 和 Pinia。

状态管理这一部分会先通过 Vuex 帮助你理解集中式状态管理的基本思路，再学习 Pinia，并理解两者之间的差异和使用方式。这样在以后接触不同项目、维护已有项目或者学习新的状态管理方案时，也会更容易理解。

课程源码提供 before 和 after 两个版本，before 版本会保留必要的模板代码，你可以直接练习当前小节的核心内容；after 版本则可以用来对照和检查实现。

这门课延续我之前 B 站视频和 React 课程的风格：节奏比较紧凑，减少不必要的停顿和重复，每节课都会通过示例演示新的概念。对于比较抽象的内容，也会配合 PPT 帮助理解。

推荐的学习方式是：

• 先理解当前小节的核心概念

• 跟随示例理解完整实现过程

• 看完后自己重新写一遍

• 忘记时再回看源码或视频，而不是只被动观看

前端开发最终还是需要自己写代码。很多内容在看的时候会觉得已经理解，但真正自己动手时，才会发现哪些地方还没有掌握。所以课程中的示例最好尽量自己完成一遍。

课程不会单纯追求时长，而是更强调单位时间内的信息密度。希望你能用更短的时间建立完整的 Vue 3 知识体系，而不是面对几十上百小时的课程列表而迟迟学不完。

如果你的目标是系统掌握 Vue 3、TypeScript、Vue Router、Pinia 和 Vuex，并能够把这些知识真正应用到 Vue 项目开发中，这门课程会给你一条比较完整的学习路径。

你只需要熟练掌握 HTML、CSS 和 JavaScript，就可以开始学习。