Vue3 从 2020 年正式发布到现在，组合式 API、<script setup>、Teleport、响应式底层换成 Proxy 这些变化已经不算新鲜事，但真正动手写一个完整项目时，卡住人的往往不是「ref 和 reactive 用哪个」这类语法题，而是：路由守卫到底该在哪一层拦登录？请求函数怎么封装才不会在组件里到处写 try/catch？弹窗组件为什么一定要用 Teleport？这套 15 章的内容，主线就是把这些「写的时候才会撞上」的问题串起来讲一遍。
先确认自己缺的是哪一块
如果你已经能用 Vue3 写单个页面，但没独立搭过一个带登录态的完整前端，缺的通常是三块：一是组合式 API 的组织方式，不知道逻辑该拆到哪；二是路由与权限的配合，守卫写在全局还是组件里分不清；三是通用组件的抽象，Toast、弹窗这类东西每次都重写。这套内容里第 9 章的登录功能开发，正好把这几块压在一个真实场景里：登录页布局、注册页与路由串联、请求函数封装、Setup 函数的职责划分、路由守卫做基础登录校验、Toast 弹窗组件开发。每一节对应的是一个具体动作，不是泛泛的 API 罗列。
组合式 API 不是语法糖，是组织方式
很多人学 Vue3 的第一道坎，是把 setup 当成「换个地方写 data 和 methods」。真正的区别在于：setup 里可以按业务逻辑聚合代码，把一件事用到的响应式数据、计算属性、方法放在一起，而不是按类型拆散到 data、computed、methods 三个块里。第 9 章专门讲到 Setup 函数的职责，并拿注册功能来实现——注册涉及表单校验、提交、错误提示、跳转，这几步如果按老写法会散落在各处，用组合式的方式就能收拢成一段可读的逻辑。学完这一节应该能回答：一个注册表单的校验逻辑，放在组件里、放在独立的组合函数里，边界怎么划？
路由守卫与请求封装，是登录链路的两根桩
登录校验最常见的错误做法，是在每个需要登录的页面里写一遍判断。第 9 章把路由守卫单独拎出来讲基础登录校验，意思很明确：拦截应该发生在进入路由之前，而不是渲染之后。与之配套的是请求函数的封装——接口错误、token 失效、统一提示，这些如果每个组件各自处理，代码量会翻倍且难以维护。这里的顺序建议是：先看懂守卫怎么拦、拦下来之后跳去哪，再看请求层怎么统一处理异常，最后回头看 Toast 为什么要做成全局组件而不是页面局部。
动画与购物链路，检验你是否真的会拆组件
除了登录，这套内容还覆盖购物链路和动画。购物链路考验的是数据在多个页面之间怎么流转、状态放在哪一层；动画则往往牵扯到过渡组件的使用时机，以及和列表渲染的配合。这两块不像登录那样有明确的「对错」，但更容易暴露问题：组件拆得太碎导致数据传递绕远路，或者状态放得太高导致页面耦合。如果你在这两部分练习时频繁改结构，基本可以判断组合式 API 还没真正用顺。
看完应该能回答的问题
- 路由守卫里判断登录态，token 从哪读、什么时候读，为什么不能在守卫里直接发请求？
- 请求函数封装之后，业务组件里还需要写 catch 吗？错误提示统一在哪里触发？
- Toast 组件为什么适合挂在顶层，Teleport 在这里解决了什么实际问题？
- 注册和登录两个页面的表单校验逻辑，能抽成同一个组合函数吗，抽的代价是什么？
- 购物链路中跨页面共享的数据，你选择放在路由参数、全局状态还是组件内，依据是什么？
如果上面这些问题你能边做边答上来，说明这套内容对你来说是补缺；如果大部分都答不出，建议按章节顺序过一遍，重点放在第 9 章的登录链路和后面的项目部分，不要跳着看动画章节——动画通常是你把前两部分理顺之后才玩得转的东西。
mksz472-Vue3 系统入门与项目实战(15章) 完整版
Vue3实战，从入门到项目实战
编辑点评
系统学习Vue3，涵盖登录、购物链路、动画等实战项目，适合初学者及进阶者。
⭐ 编辑推荐
本课程深入浅出地讲解Vue3，通过实战项目提升技能。
从基础语法到高级应用，全面掌握Vue3。
课程亮点
• Vue3实战项目
• 系统学习路径
• 适合不同水平学员
课程目录
📁 第9章 登陆功能开发
9-8 Setup函数的职责以及注册功能的实现（1）.mp4 [181.0 MB]
9-1 登陆页面布局开发.mp4 [263.8 MB]
9-2 路由守卫实现基础登陆校验功能.mp4 [114.8 MB]
9-6 Toast 弹窗组件的开发.mp4 [125.0 MB]
9-3 注册页面开发及路由串联复习.mp4 [121.2 MB]
9-5 请求函数的封装.mp4 [129.6 MB]
9-4 使用axios 发送登陆 Mock 请求.mp4 [192.3 MB]
9-7 通过代码拆分增加逻辑可维护性.mp4 [146.4 MB]
9-9 Setup函数的职责以及注册功能的实现（2）.mp4 [218.6 MB]
📁 第12章 核心购物链路开发
12-2 确认订单页面创建及顶部布局（2）.mp4 [179.4 MB]
12-5 页面布局及展示逻辑开发（1）.mp4 [179.5 MB]
12-11 下单流程开发优化.mp4 [84.6 MB]
12-12 订单列表页布局开发（1）.mp4 [152.6 MB]
12-7 确认订单页面组件拆分及弹框布局制作（1）.mp4 [205.5 MB]
12-4 订单商品列表数据获取与布局（2）.mp4 [268.1 MB]
12-10 购物流程开发完成（2）.mp4 [225.6 MB]
12-3 订单商品列表数据获取与布局（1）.mp4 [351.6 MB]
12-14 订单列表逻辑开发（1）.mp4 [284.4 MB]
12-6 页面布局及展示逻辑开发（2）.mp4 [314.7 MB]
12-8 确认订单页面组件拆分及弹框布局制作（2）.mp4 [220.5 MB]
12-13 订单列表页布局开发（2）.mp4 [200.4 MB]
12-15 订单列表逻辑开发（2）.mp4 [246.9 MB]
12-9 购物流程开发完成（1）.mp4 [156.0 MB]
12-1 确认订单页面创建及顶部布局（1）.mp4 [233.9 MB]
📁 第5章 Vue 中的高级语法
5-6 更加底层的 render 函数（选学）.mp4 [127.9 MB]
5-8 数据校验插件开发实例.mp4 [105.1 MB]
5-1 Mixin 混入的基础语法（1）.mp4 [60.5 MB]
5-7 插件的定义和使用.mp4 [85.2 MB]
5-2 Mixin 混入的基础语法（2）.mp4 [119.9 MB]
5-4 开发实现 Vue 中的自定义指令（2）.mp4 [82.5 MB]
5-5 Teleport 传送门功能.mp4 [84.5 MB]
5-3 开发实现 Vue 中的自定义指令（1）.mp4 [78.7 MB]
📁 第3章 探索组件的理念
3-11 作用域插槽.mp4 [48.3 MB]
3-13 基础语法知识点查缺补漏.mp4 [101.9 MB]
3-6 父子组件间如何通过事件进行通信（1）.mp4 [99.4 MB]
3-5 Non-Props 属性是什么.mp4 [78.4 MB]
3-4 单项数据流的理解.mp4 [103.3 MB]
3-1 组件的定义及复用性，局部组件和全局组件（1）.mp4 [68.8 MB]
3-12 动态组件和异步组件.mp4 [97.0 MB]
3-7 父子组件间如何通过事件进行通信（2）.mp4 [40.8 MB]
3-10 使用插槽和具名插槽解决组件内容传递问题（2）.mp4 [63.5 MB]
3-9 使用插槽和具名插槽解决组件内容传递问题（1）.mp4 [85.0 MB]
3-3 组件间传值及传值校验.mp4 [128.0 MB]
3-2 组件的定义及复用性，局部组件和全局组件（2）.mp4 [92.2 MB]
3-8 组件间双向绑定高级内容（选学）.mp4 [95.2 MB]
📁 第13章 真机调试及工程发布流程
13-2 解决真机调试过程中的展示问题.mp4 [303.0 MB]
13-4 项目上线和课程总结.mp4 [205.6 MB]
13-1 如何进行真机调试.mp4 [130.0 MB]
13-3 实现项目对不同设备的展示适配.mp4 [102.5 MB]
📁 第4章 Vue 中的动画
4-4 使用 transition 标签实现单元素组件的过渡和动画效果（3）.mp4 [102.9 MB]
4-6 列表动画.mp4 [53.2 MB]
4-2 使用 transition 标签实现单元素组件的过渡和动画效果（1）.mp4 [114.6 MB]
4-7 状态动画.mp4 [50.9 MB]
4-1 使用 Vue 实现基础的 CSS 过渡与动画效果.mp4 [118.5 MB]
4-5 组件和元素切换动画的实现.mp4 [97.6 MB]
4-3 使用 transition 标签实现单元素组件的过渡和动画效果（2）.mp4 [95.9 MB]
📁 第10章 商家展示功能开发（上）
10-6 路由参数的传递以及商家详情的获取（1）.mp4 [126.9 MB]
10-11 样式的优化与代码复用（2）.mp4 [142.7 MB]
10-2 动态路由，异步路由与组件拆分复用（1）.mp4 [207.7 MB]
10-7 路由参数的传递以及商家详情的获取（2）.mp4 [139.0 MB]
10-5 搜索布局及路由跳转（2）.mp4 [99.3 MB]
10-4 搜索布局及路由跳转（1）.mp4 [148.3 MB]
10-9 商家页面核心样式开发（2）.mp4 [183.1 MB]
10-3 动态路由，异步路由与组件拆分复用（2）.mp4 [97.0 MB]
10-10 样式的优化与代码复用（1）.mp4 [122.0 MB]
10-1 首页附近店铺数据动态化-详情页准备.mp4 [151.3 MB]
10-12 商家详情页分类及内容联动的实现.mp4 [293.1 MB]
10-13 使用 watchEffect 巧妙的进行代码拆分.mp4 [221.7 MB]
10-8 商家页面核心样式开发（1）.mp4 [158.2 MB]
📁 第11章 商家展示功能开发（下）
11-4 使用 computed 完成订单价格计算.mp4 [273.8 MB]
11-7 根据购物车选中状态计算订单金额（1）.mp4 [187.1 MB]
11-12 商家详情页面代码优化（2）.mp4 [108.9 MB]
11-8 根据购物车选中状态计算订单金额（2）.mp4 [181.3 MB]
11-2 Vuex中购物车数据结构的设计（1）.mp4 [209.1 MB]
11-13 购物车数据结构的变更（1）.mp4 [124.7 MB]
11-16 通过 LocalStorage 实现购物车信息持久存储（2）.mp4 [129.2 MB]
11-3 Vuex中购物车数据结构的设计（2）.mp4 [83.8 MB]
11-11 商家详情页面代码优化（1）.mp4 [223.9 MB]
11-5 购物车及列表双向数据同步功能开发（1）.mp4 [290.3 MB]
11-14 购物车数据结构的变更（2）.mp4 [191.8 MB]
11-15 通过 LocalStorage 实现购物车信息持久存储（1）.mp4 [259.7 MB]
11-9 全选及清空购物车的功能实现（1）.mp4 [271.1 MB]
11-10 全选及清空购物车的功能实现（2）.mp4 [252.5 MB]
11-6 购物车及列表双向数据同步功能开发（2）.mp4 [131.0 MB]
11-1 购物车的样式开发.mp4 [264.4 MB]
📁 课程资料
code-for-project-master.zip [13.4 MB]
📁 第6章 Composition API
6-7 使用 Composition API 开发TodoList（2）.mp4 [55.3 MB]
6-8 computed方法生成计算属性.mp4 [92.2 MB]
6-4 toRef 以及 context 参数（1）.mp4 [30.2 MB]
6-6 使用 Composition API 开发TodoList（1）.mp4 [79.7 MB]
6-10 watch 和 watchEffect 的使用和差异性（2）.mp4 [89.2 MB]
6-2 ref，reactive 响应式引用的用法和原理（1）.mp4 [89.0 MB]
6-1 Setup 函数的使用.mp4 [80.3 MB]
6-3 ref，reactive 响应式引用的用法和原理 （2）.mp4 [60.2 MB]
6-11 生命周期函数的新写法.mp4 [86.1 MB]
6-5 toRef 以及 context 参数（2）.mp4 [85.6 MB]
6-12 Provide,Inject,模版 Ref 的用法.mp4 [118.9 MB]
6-9 watch 和 watchEffect 的使用和差异性（1）.mp4 [94.0 MB]
📁 第8章 “京东到家”项目首页开发
8-1 工程初始化.mp4 [35.8 MB]
8-8 首页布局收尾.mp4 [365.4 MB]
8-2 工程目录代码简介及整理.mp4 [77.3 MB]
8-7 使用 flex布局实现图标列表布局.mp4 [237.0 MB]
8-10 使用v-for, v-html 指令精简页面代码.mp4 [319.3 MB]
8-11 CSS 作用域约束以及 Vue 开发者工具的安装使用.mp4 [104.2 MB]
8-4 flex + iconfont 完成首页 docker 样式编写.mp4 [268.7 MB]
8-5 使用Scss 组织地址区域布局.mp4 [310.6 MB]
8-6 利用CSS技巧实现搜索及 banner 区域布局.mp4 [285.6 MB]
8-9 首页组件的合理拆分.mp4 [321.4 MB]
8-3 基础样式集成及开发模拟器的使用.mp4 [35.2 MB]
📁 第15章 【2022加餐】购物地址管理功能实现
15-5地址编辑逻辑开发1837_ev.mp4 [110.6 MB]
15-1地址列表页面开发11403_ev.mp4 [87.4 MB]
15-3地址新建逻辑开发11709_ev.mp4 [101.4 MB]
15-6实现下单地址选择功能11831_ev.mp4 [115.0 MB]
15-4地址新建逻辑开发21942_ev.mp4 [127.9 MB]
15-7实现下单地址选择功能20944_ev.mp4 [66.9 MB]
15-2地址列表页面开发21316_ev.mp4 [88.3 MB]
📁 第7章 Vue 项目开发配套工具讲解
7-6 VueX 的语法详解（1）.mp4 [76.8 MB]
7-8 VueX 的语法详解（3）.mp4 [71.7 MB]
7-1 VueCLI 的使用和单文件组件（1）.mp4 [81.5 MB]
7-9 CompositionAPI 中如何使用 VueX.mp4 [54.0 MB]
7-5 Vue-Router 路由的理解和使用（2）.mp4 [34.8 MB]
7-3 使用单文件组件编写 TodoList.mp4 [93.4 MB]
7-10 使用 axios 发送ajax 请求.mp4 [41.8 MB]
7-4 Vue-Router 路由的理解和使用（1）.mp4 [97.6 MB]
7-7 VueX 的语法详解（2）.mp4 [109.3 MB]
7-2 VueCLI 的使用和单文件组件（2）.mp4 [64.9 MB]
📁 第14章 【2022加餐】商品搜索 & 购物车功能实现
14-6搜索列表布局及逻辑实现11538_ev.mp4 [106.9 MB]
14-5搜索列表页面逻辑开发1003_ev.mp4 [64.9 MB]
14-13购物车优化mixin样式复用21903_ev.mp4 [89.9 MB]
14-7搜索列表布局及逻辑实现21346_ev.mp4 [94.7 MB]
14-3搜索历史逻辑的实现10806_ev.mp4 [33.1 MB]
14-12购物车优化mixin样式复用10949_ev.mp4 [49.6 MB]
14-8搜索列表布局及逻辑实现31244_ev.mp4 [96.7 MB]
14-9购物车列表开发11550_ev.mp4 [90.7 MB]
14-2搜索页面样式布局21347_ev.mp4 [75.3 MB]
14-11购物车列表开发31658_ev.mp4 [79.4 MB]
14-4搜索历史逻辑的实现21224_ev.mp4 [65.5 MB]
14-1搜索页面样式布局11126_ev.mp4 [52.9 MB]
14-10购物车列表开发21513_ev.mp4 [87.2 MB]
📁 第1章 Vue 语法初探
1-4 编写TodoList 小功能，了解循环和双向绑定.mp4 [84.7 MB]
1-1 课前须知，这里有你需要了解的一切.mp4 [25.4 MB]
1-2 初学编写 HelloWorld 和 Counter.mp4 [105.2 MB]
1-3 编写字符串反转和内容隐藏小功能.mp4 [65.9 MB]
1-5 组件概念初探，对 TodoList 进行组件代码拆分.mp4 [135.1 MB]
📁 第2章 Vue 基础语法
2-9 条件渲染.mp4 [48.8 MB]
2-8 样式绑定语法.mp4 [103.6 MB]
2-15 表单中双向绑定指令的使用（2）.mp4 [59.6 MB]
2-5 常用模版语法讲解（2）.mp4 [70.3 MB]
2-7 数据，方法，计算属性和侦听器（2）.mp4 [49.9 MB]
2-12 事件绑定（1）.mp4 [93.5 MB]
2-1 Vue 中应用和组件的基础概念.mp4 [69.6 MB]
2-10 列表循环渲染（1）.mp4 [88.6 MB]
2-4 常用模版语法讲解（1）.mp4 [75.3 MB]
2-3 理解 Vue 中的生命周期函数（2）.mp4 [109.6 MB]
2-11 列表循环渲染（2）.mp4 [87.1 MB]
2-16 表单中双向绑定指令的使用（3）.mp4 [71.5 MB]
2-14 表单中双向绑定指令的使用（1）.mp4 [64.0 MB]
2-2 理解 Vue 中的生命周期函数（1）.mp4 [88.5 MB]
2-6 数据，方法，计算属性和侦听器（1）.mp4 [126.2 MB]
2-13 事件绑定（2）.mp4 [61.8 MB]适合人群
- Vue3初学者
- Vue3进阶者
- 前端开发人员
学习收获
掌握Vue3基础语法
实现实战项目
提升前端开发能力
祝您学习愉快！
学有所成，前程似锦！
