这门课解决什么场景，适合谁

这套教程针对的是想用主流技术栈落地一个完整 B2C 电商项目的开发者。它不只是讲语法，而是把 Vue3 的组合式 API、Pinia 状态管理、Element Plus 组件库和 Axios 请求封装，放在「小兔鲜」这个真实业务场景里串联起来。

内容从项目初始化、路由设计、布局搭建，一直覆盖到购物车逻辑、结算流程、地址管理、支付接口对接以及订单生成。这对于正在为“有前端基础，但拿不出一个像样的完整项目”而焦虑的上班族或转行者来说，是非常对症的。如果你已经会用 Vue2 或了解基础概念，想快速补齐 Vue3 生态（特别是 Pinia 替代 Vuex 的写法）以及中大型后台/商城项目的工程化经验，这套资料刚好处于“够得着”的位置。

建议学习顺序与练习方式

不要按日期强行线性播放，建议按模块推进：

**第一阶段：基建与规范**
先看完项目起步部分。重点理解 `create-vue` 创建项目后的目录结构、Element Plus 的按需导入配置、SCSS 自动引入以及路由的整体设计思路。这一步决定了你后续写代码是否整洁。

**第二阶段：核心交互与状态管理**
进入购物车和结算模块。这是全课最重头的部分，涉及复杂的状态同步。
- 先看**购物车本地逻辑**：列表渲染、单选/全选、统计数据计算。
- 再看**接口联调**：加入购物车、删除商品、以及“本地购物车合并到服务器”的逻辑。这里会用到 Pinia 的 getters 和异步 action，务必手敲一遍代码，搞清楚 store 里的数据如何驱动视图更新。
- 接着是**结算与支付**：地址切换、倒计时封装、生成订单、支付结果展示。这部分业务逻辑闭环，适合单独拿出来复盘。

**练习建议：**
不要只看不练。每节课的代码最好跟着老师敲一遍，遇到报错自己排查。尤其是 Pinia 的状态同步和 Axios 的拦截器配置，看懂和写出来是两回事。建议你自己搭一个空的 Vue3 项目，尝试把教程里的购物车模块独立移植进去，模拟真实的开发调试过程。

学完能独立做什么

完成核心章节后，你应该能够：
1. 独立搭建基于 Vue3 + Vite 的中大型单页应用，配置好别名、样式预处理器和 UI 组件库。
2. 使用 Pinia 管理全局状态，处理复杂的前后端数据交互，避免组件间通信的混乱。
3. 实现电商常见的购物车增删改查、价格实时计算、多地址切换及下单流程。
4. 具备阅读和梳理中等复杂度项目源码的能力，为后续接触更复杂的业务系统打下基础。

这不仅仅是一套视频，更像是一次完整的项目实战演练。如果你能坚持把购物车到支付的完整链路跑通，你的简历上就有一个可以拿出来详细讲述的 Vue3 实战案例。

课程目录

📁 Vue3小兔鲜 - day02
Day2-05.项目起步-项目初始化和git管理.mp4 [107.7 MB]
Day2-10.项目起步-项目整体路由设计.mp4 [240.2 MB]
Day2-07.项目起步-elementPlus自动按需导入配置.mp4 [185.0 MB]
Day2-15.Layout-一级导航渲染.mp4 [225.0 MB]
Day2-04.Pinia-storeToRefs和调试【不易整理‖请关注：CunWorkNoteS】.mp4 [227.2 MB]
Day2-01.Pinia-添加pinia到vue项目.mp4 [28.9 MB]
Day2-03.Pinia-getters和异步action.mp4 [244.1 MB]
Day2-11.项目起步-静态资源引入和ErrorLen安装.mp4 [91.0 MB]
Day2-02.Pinia-counter基础使用.mp4 [227.3 MB]
Day2-13.Layout-静态模版结构搭建.mp4 [91.3 MB]
Day2-06.项目起步-别名路径联想设置【持续更新‖免费提供：CunworknoteS】.mp4 [137.7 MB]
Day2-12.项目起步-scss文件的自动导入.mp4 [131.0 MB]
Day2-14.Layout-字体图标引入【持续更新‖免费提供：CunworknoteS】.mp4 [128.8 MB]
Day2-17.Layout-Pinia优化重复请求.mp4 [43.3 MB]
Day2-16.Layout-吸顶导航交互实现【不易整理‖请关注：CunWorkNoteS】.mp4 [317.6 MB]
Day2-08.项目起步-elementPlus主题色定制.mp4 [195.4 MB]
Day2-09.项目起步-axios基础配置.mp4 [216.9 MB]
📁 Vue3小兔鲜 - day06
Day6-16.支付-封装倒计时函数.mp4 [62.2 MB]
Day6-11.结算-切换地址-地址激活交互实现【公重号：CunWorkNotes】.mp4 [247.7 MB]
Day6-08.购物车-合并本地购物车到服务器.mp4 [314.7 MB]
Day6-05.购物车-接口-加入购物车.mp4 [442.8 MB]
Day6-03.购物车-本地-购物车列表全选功能.mp4 [240.2 MB]
Day6-01.购物车-本地-列表购物车基础数据渲染【持续更新‖免费提供：CunworknoteS】.mp4 [32.3 MB]
Day6-02.购物车-本地-列表购物车单选功能【资源精选‖更多关注：CunworkNotes】.mp4 [450.0 MB]
Day6-15.支付-支付结果展示【更多精选‖公众号：CunWorknotes】 .mp4 [304.9 MB]
Day6-10.结算-地址切换-打开弹框交互实现.mp4 [115.1 MB]
Day6-07.退出登录-清空购物车数据.mp4 [167.3 MB]
Day6-13.支付-渲染基础数据【不易整理‖请关注：CunWorkNoteS】.mp4 [167.7 MB]
Day6-12.结算-生成订单功能实现.mp4 [532.7 MB]
Day6-14.支付-实现支付功能.mp4 [152.5 MB]
Day6-04.购物车-本地-购物车列表统计数据实现.mp4 [149.6 MB]
Day6-06.购物车-接口-删除购物车.mp4 [371.2 MB]
Day6-09.结算-路由配置和基础数据渲染【更多精选‖公众号：CunWorknotes】 .mp4 [324.3 MB]
📁 Vue3小兔鲜 - day01
Day1-12.组合式API下的父子通信-子传父.mp4 [154.1 MB]
Day1-11.组合式API下的父子通信-父传子.mp4 [191.8 MB]
Day1-13.组合式API-模版引用【资源精选‖更多关注：CunworkNotes】.mp4 [139.8 MB]
Day1-03.使用create-vue创建项目.mp4 [84.3 MB]
Day1-06.组合式API-reactive和ref函数.mp4 [203.3 MB]
Day1-07.组合式API-computed.mp4 [140.1 MB]
Day1-08.组合式API-watch-基本使用和立即执行.mp4 [251.0 MB]
Day1-15.Vue3综合小案例.mp4 [352.6 MB]
Day1-09.组合式API-watch-深度侦听和精确侦听.mp4 [193.4 MB]
Day1-16.补充作业-编辑功能作业【优质资源‖关注：cunWorkNotes 解锁】.mp4 [68.1 MB]
Day1-14.组合式API-provide和inject【持续更新‖免费提供：CunworknoteS】.mp4 [359.7 MB]
Day1-05.组合式API入口-setup【优质资源‖关注：cunWorkNotes 解锁】.mp4 [198.8 MB]
Day1-01.Vue3小兔鲜先导课.mp4 [23.9 MB]
Day1-04.熟悉项目目录和关键文件【不易整理‖请关注：CunWorkNoteS】.mp4 [130.5 MB]
Day1-02.认识Vue3.mp4 [23.8 MB]
Day1-10.组合式API-生命周期函数【资源精选‖更多关注：CunworkNotes】.mp4 [112.2 MB]
📁 Vue3小兔鲜 - day04
Day4-01.二级分类-整体认识和路由配置.mp4 [46.6 MB]
Day4-10.详情页-热榜区-适配不同title和数据列表.mp4 [286.6 MB]
Day4-06.二级分类-定制路由滚动行为.mp4 [115.7 MB]
Day4-09.详情页-热榜区-基础组件封装和数据渲染.mp4 [398.6 MB]
Day4-04.二级分类-列表筛选功能实现.mp4 [316.2 MB]
Day4-03.二级分类-基础商品列表实现.mp4 [336.2 MB]
Day4-13.详情页-图片预览组件-放大镜-大图效果实现【更多精选‖公众号：CunWorknotes】 .mp4 [345.7 MB]
Day4-11.详情页-图片预览组件-小图切换大图显示.mp4 [416.9 MB]
Day4-08.详情页-基础数据渲染.mp4 [698.7 MB]
Day4-12.详情页-图片预览组件-放大镜-滑块跟随移动.mp4 [584.6 MB]
Day4-07.详情页-整体认识和路由配置【不易整理‖请关注：CunWorkNoteS】.mp4 [227.3 MB]
Day4-02.二级分类-面包屑导航实现.mp4 [242.3 MB]
Day4-15.详情页-SKU组件熟悉使用【优质资源‖关注：cunWorkNotes 解锁】.mp4 [268.9 MB]
Day4-14.详情页-图片预览组件-props适配和整体总结.mp4 [250.7 MB]
Day4-16.详情页-通用组件统一注册全局.mp4 [28.4 MB]
Day4-05.二级分类-列表无限加载实现.mp4 [411.3 MB]
📁 Vue3小兔鲜 - 配套资料
Vue3小兔鲜 - 配套资料.exe [17.6 MB]
📁 Vue3小兔鲜 - day07
Day7-08.拓展课-SKU组件-点击规格更新选中状态.mp4 [247.5 MB]
Day7-03.会员中心-我的订单-基础订单列表实现【整理不易‖记得关注：CunWorKNotes】.mp4 [221.2 MB]
Day7-01.会员中心-整体功能梳理和路由配置.mp4 [40.5 MB]
Day7-04.会员中心-我的订单-tab切换实现【更多精选‖公众号：CunWorknotes】 .mp4 [140.9 MB]
Day7-10.拓展课-SKU组件-初始化时更新禁用状态.mp4 [242.0 MB]
Day7-02.会员中心-个人中心信息渲染.mp4 [189.7 MB]
Day7-09.拓展课-SKU组件-获取有效路径字典【资源精选‖更多关注：CunworkNotes】.mp4 [520.0 MB]
Day7-06.会员中心-细节优化【持续更新‖免费提供：CunworknoteS】.mp4 [137.9 MB]