这门课解决什么工作场景

前端项目一旦规模扩大，单纯靠页面之间的传值或全局变量维护状态，代码会迅速变得难以阅读和调试。本课程针对的是中大型 Vue 单页应用（SPA）开发中的核心痛点：组件间通信混乱、跨页面共享数据难以追踪、以及路由管理复杂。通过引入 Pinia 和 Vue Router，它提供了一套标准化的解决方案，帮助开发者从“能跑就行”的散乱代码，转向结构清晰、可维护性强的工程化开发模式。

适合什么基础、建议先看哪几块

适合已经掌握 JavaScript 基础语法、了解 DOM 操作，且对 Vue 基础指令（v-if, v-for, v-model）有初步认知的初学者或初级开发者。课程前半部分重点讲解组件化思维，建议优先通看组件传值（defineProps、emit）、插槽（Slot）及生命周期钩子这几块，这是理解后续状态管理的基石。后半部分聚焦 Pinia 状态管理和 Vue Router 路由守卫、懒加载等高级用法，是提升实战能力的关键。

学完能独立做什么

学完后，你将能够独立搭建基于 Vite + Vue3 的现代前端项目架构。具体而言，你可以熟练运用 Pinia 管理全局用户状态（如登录信息、主题配置），避免 prop drilling 的繁琐；能够配置复杂的路由体系，实现页面权限控制（全局守卫）和首屏性能优化（路由懒加载）；并能封装高内聚、低耦合的自定义组件。这些能力足以应对日常工作中的后台管理系统或中型 ToC 应用开发需求。

资料怎么配合练习

建议边看视频边动手，不要只看不练。在学到 watch 监听和组件传值时，尝试手动实现一个简易的计数器或todolist；在Pinia部分，搭建一个包含登录态模拟的完整流程，体验 Actions 修改状态的过程；在路由部分，重点实践嵌套路由和路由守卫的跳转逻辑。通过复现这些典型场景，能将理论知识转化为肌肉记忆。

课程目录

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