从基础到工程化：Vue 3 生态的核心能力补全

这门课并非适合所有人的泛泛而谈，而是专门针对「知道 Vue 3 概念，但写项目时不知道如何组织代码」的学习者。很多初学者能写出简单的计数器，但一旦涉及组件通信、状态共享、路由守卫或多页面跳转，就会陷入混乱。本教程的核心价值在于把 Vue 3 的核心 API（Composition API）与配套工具链串联起来，解决的是「碎片化知识无法落地为完整应用」的能力缺口。

适合具备 JavaScript 基础（理解闭包、箭头函数、ES6 语法）但未系统学习过现代前端框架的同学。如果你连 `defineProps` 和 `ref` 的区别都模糊，或者不清楚为什么需要 Pinia，这里会给出清晰的边界解释。建议先看「组件传值」与「插槽」部分，建立组件化思维；紧接着进入「Pinia 状态管理」，理解全局数据的来源；最后通过「Vue Router」完成多页面应用的构建。

实战场景：学完能独立做什么

课程不仅讲解语法，更强调场景还原。学完本节后，你将能够：

  • 使用 watch 监听单一或响应式对象的变化，处理数据依赖逻辑
  • 在父子组件间通过 props、emit 和 provide/inject 实现灵活的数据与事件通信
  • 利用 Pinia 管理全局状态，替代分散的局部变量，避免状态污染
  • 配置 Vue Router 实现页面跳转、参数传递、路由守卫及懒加载，提升应用性能
  • 结合 Vite 快速搭建开发环境，理解现代前端工程化的基本流程

配套练习资料建议按章节顺序逐一运行，重点对比「选项式 API」与「组合式 API」在相同逻辑下的代码差异，并尝试修改路由守卫逻辑模拟登录拦截场景，以巩固理解。

课程目录

100_17 Vue使用watch监听数据变化.mp4 25.67M
101_18 Vue watch 多个数据变化.mp4 25.94M
102_19 Vue watch对象项目.mp4 33.19M
103_20 Vue键盘修饰符.mp4 93.94M
104_21 Vue鼠标修饰符.mp4 24.94M
105_01 什么是Vue组件.mp4 37.34M
106_02 Vue自定义组件初体验.mp4 35.36M
107_03 Vue组件传值defineProps.mp4 30.79M
108_04 Vue组件传值可选配置.mp4 13.54M
109_05 Vue组件自定义校验.mp4 25.94M
10_05 理解数据类型.mp4 5.07M
110_06 Vue组件单向数据流.mp4 33.52M
111_07 Vue组件定义emit事件.mp4 21.71M
112_08 Vue组件emit事件传递参数.mp4 8.09M
113_09 Vue插槽Slot介绍与使用.mp4 36.29M
114_10 Vue具名插槽-命名插槽.mp4 31.83M
115_11 Vue共享数据的发布和订阅.mp4 16.75M
116_12 Vue Provide和Inject发布和订阅数据.mp4 36.45M
117_13 Vue 发布函数修改provide的数据.mp4 36.06M
118_14 Vue发布只读数据.mp4 23.75M
119_15 Vue生命周期了解.mp4 23.04M
11_06 理解数据结构.mp4 11.75M
120_16 Vue生命周期钩子函数使用.mp4 58.99M
121_01 什么是状态管理器Pinia.mp4 33.55M
122_02 Vue状态管理基本使用.mp4 72.27M
123_03 Vue状态管理全局数据修改.mp4 46.46M
124_04 Vue状态管理Actions传递参数.mp4 4.42M
125_05 Vue路由管理vue router介绍.mp4 38.62M
126_06 Vue Router Hash和History.mp4 21.00M
127_07 Vue Router Vite初体验.mp4 69.42M
128_08 Vue Router push和replace.mp4 9.24M
129_09 Vue Router动态路由.mp4 27.66M
12_07 数组的使用场景.mp4 9.40M
130_10 Vue Router通过js跳转路由.mp4 21.18M
131_11 Vue Router路由调整传递参数.mp4 44.61M
132_12 Vue useRouter和useRoute.mp4 10.38M
133_13 Vue Router路由懒加载.mp4 30.59M
134_14 Vue Router路由嵌套.mp4 65.62M
135_15 Vue Router路由全局守卫.mp4 55.79M
136_16 Vue Router路由独享守卫.mp4 22.62M
137_17 Axios后端接口调用介绍.mp4 19.21M
138_18 Axios初体验-发送Get请求.mp4 85.16M
139_19 Axios添加请求参数.mp4 28.20M
13_08 列表的使用场景.mp4 4.73M
140_20 Axios请求数据双向绑定.mp4 38.62M
141_21 Axios使用请求配置调用接口.mp4 28.84M
142_22 Axios创建和发送post类型的请求.mp4 34.03M
143_23 Axios接口超时配置.mp4 24.06M
144_24 Axios自定义请求头.mp4 19.80M
145_25 Axios定义全局配置.mp4 23.78M
146_26 Axios拦截器介绍.mp4 16.49M
147_27 Axios请求拦截器.mp4 33.29M
148_28 Axios响应拦截器.mp4 47.37M
149_29 Axios接口封装.mp4 49.75M
14_09 对象的使用场景.mp4 7.21M
150_30 Axios接口封装测试.mp4 36.89M
151_01 脚手架项目及ElementPlus演示.mp4 25.15M
152_02 脚手架项目基本配置.mp4 58.88M
153_03 使用Git管理项目.mp4 16.34M
154_04 登录页-路由及登录框实现.mp4 24.19M
155_05 登录页-实现用户名密码和登录按钮.mp4 66.03M
156_06 登录页-实现输入框清空和密码显示功能.mp4 15.36M
157_07 登录页-实现用户登录输入校验.mp4 26.02M
158_08 登录页-根据校验结果设置登录的禁用状态.mp4 35.74M
159_09 登录逻辑-实现登录调用后台接口.mp4 40.95M
15_10 强类型和弱类型语言.mp4 4.85M
160_10 登录逻辑-接口地址和接口方法的封装.mp4 83.13M
161_11 登录逻辑-实现JWT Token的存储.mp4 19.67M
162_12 登录逻辑-实现请求头添加认证Token.mp4 38.61M
163_13 登录逻辑-判断登录状态是否已失效.mp4 39.15M
164_14 登录逻辑-实现首页路由并且登录后自动跳转.mp4 21.11M
165_15 登录逻辑-实现页面未登录的请求拦截.mp4 46.99M
166_16 登录逻辑-登录框样式调整.mp4 35.03M
167_17 Layout-实现layout的拆分.mp4 40.85M
168_18 Layout-实现网页的标准布局.mp4 59.29M
169_19 Layout-Aside Logo信息展示设计.mp4 82.90M
16_11 运算符分类.mp4 9.98M
170_20 Layout-Logo点击跳转及样式修复.mp4 40.21M
171_21 Layout-Aside菜单实现.mp4 74.40M
172_22 Layout-自动生成菜单配置梳理.mp4 50.77M