学习 Vue.js 的路线可以分为几个阶段，从基础到进阶，逐步掌握其核心概念和生态工具。以下是我本人的系统化的学习路线。

推荐自学教程：b站尚硅谷vue2+vue3（免费+资料）

讲得很详细，他会把很多你可能疑惑的点都讲一遍，但是也意味着时间比较久，我个人学起来感觉还行。

---

### **一、基础入门**

1. **前置知识**

- HTML/CSS/JavaScript（ES6+）：掌握基础语法、DOM 操作、模块化开发等。

- 了解前端工程化概念：npm/yarn、包管理、模块化等。

2. **Vue 核心概念**

- **Vue 简介**：Vue 的特点（响应式、组件化、轻量级）、Vue 2 与 Vue 3 的主要区别。

- **安装与起步**：

- CDN 引入或通过 `npm create vue@latest` 创建项目。

- 编写第一个 Vue 应用（Vue 实例、挂载点、模板语法）。

- **模板语法**：

- 插值语法 `{{ }}`、指令（`v-bind`, `v-model`, `v-for`, `v-if/v-show` 等）。

- **响应式原理**：

- Vue 2 的 `Object.defineProperty` 与 Vue 3 的 `Proxy`。

- **组件化开发**：

- 组件的定义与注册（全局/局部）、组件通信（Props、自定义事件、插槽）。

- **生命周期钩子**：

- `created`, `mounted`, `updated`, `unmounted` 等阶段的作用。

---

### **二、进阶技能**

3. **Vue Router**

- 路由配置（动态路由、嵌套路由）。

- 编程式导航（`router.push`）、路由守卫（全局/局部守卫）。

- Hash 模式与 History 模式的区别。

4. **状态管理（Vuex/Pinia）**

- **Vuex**（Vue 2）：

- State、Mutations、Actions、Getters。

个人建议：如果时间比较充分的话可以先过一遍vue2，因为还是有部分企业现在使用的是vue2框架，但是总归我们要学新的，把重点放在vue3上面。