Vue3 核心机制与现代化前端工程化实战

本课程专为渴望从 Vue2 选项式 API 平滑迁移至 Vue3 组合式 API 的开发者设计，直击大型项目中代码组织混乱、状态管理冗余及组件通信困难三大痛点。课程以“小兔鲜”电商项目为完整载体，不讲孤立的语法点，而是通过真实的商品展示、购物车结算等业务场景，演示如何利用组合式 API 重构逻辑。这不仅能让你快速掌握新版 Vue 的响应式原理，更能让你学会如何在实际工作中编写可维护、易扩展的代码，彻底告别“样板代码”。

先构建逻辑基石，再落地工程化骨架

学习顺序上，强烈建议先集中攻克 Day1 系列，这是后续所有实战的底层逻辑支撑。务必在动手写项目前，先理解 ref、reactive 的响应式差异，搞懂 computed 的缓存机制，并重点推演 watch 中深度侦听与精确侦听的适用场景。特别是父子组件通信及 provide/inject 注入机制，决定了你处理多层级状态传递的能力。这部分内容看似枯燥，却是区分初级与中级前端开发者的分水岭，若此处根基不牢，后续面对复杂业务时极易陷入代码混乱的泥潭。

掌握状态管理与 UI 框架的现代化集成

Day2 章节则是将理论转化为生产力的关键一步，重点在于 Pinia 状态库与 ElementPlus 组件库的无缝集成。初学者不必纠结环境搭建细节，应直接聚焦于 Pinia 的异步 action 处理与 storeToRefs 的引用映射，这是解决电商后台数据异步加载与组件内部状态同步的核心技巧。同时，务必关注 ElementPlus 的按需导入配置与主题色定制，这是提升项目构建体积与品牌视觉一致性的关键。学完这两部分，你将具备独立搭建一个具备动态路由、统一全局状态管理、UI 风格统一且构建高效的现代化前端应用骨架的能力，能够从容应对各类中小型商业项目的快速开发需求。

配套资料包中的代码片段与演示录屏需配合观看，建议采用“暂停 - 敲代码 - 运行 - 对比”的循环练习法。不要只看不练，务必在本地环境复现 Day1 的通信案例与 Day2 的状态管理配置，只有亲手敲下每一行配置代码，才能真正内化这些新技术的用法，避免“一看就会，一用就废”的尴尬局面。

课程目录

Vue3小兔鲜 – 配套资料.rar Vue3小兔鲜 – day01 Day1-01.Vue3小兔鲜先导课.mp4 Day1-02.认识Vue3.mp4 Day1-03.使用create-vue创建项目.mp4 Day1-04.熟悉项目目录和关键文件.mp4 Day1-05.组合式API入口-setup.mp4 Day1-06.组合式API-reactive和ref函数.mp4 Day1-07.组合式API-computed.mp4 Day1-08.组合式API-watch-基本使用和立即执行.mp4 Day1-09.组合式API-watch-深度侦听和精确侦听.mp4 Day1-10.组合式API-生命周期函数.mp4 Day1-11.组合式API下的父子通信-父传子.mp4 Day1-12.组合式API下的父子通信-子传父.mp4 Day1-13.组合式API-模版引用.mp4 Day1-14.组合式API-provide和inject.mp4 Day1-15.Vue3综合小案例.mp4 Day1-16.补充作业-编辑功能作业.mp4 Vue3小兔鲜 – day02 Day2-01.Pinia-添加pinia到vue项目.mp4 Day2-02.Pinia-counter基础使用.mp4 Day2-03.Pinia-getters和异步action.mp4 Day2-04.Pinia-storeToRefs和调试.mp4 Day2-05.项目起步-项目初始化和git管理.mp4 Day2-06.项目起步-别名路径联想设置.mp4 Day2-07.项目起步-elementPlus自动按需导入配置.mp4 Day2-08.项目起步-elementPlus主题色定制.mp4 Day2-09.项目起步-axios基础配置.mp4 Day2-10.项目起步-项目整体路由设计.mp4 Day2-11.项目起步-静态资源引入和ErrorLen安装.mp4 Day2-12.项目起步-scss文件的自动导入.mp4 Day2-13.Layout-静态模版结构搭建.mp4 Day2-14.Layout-字体图标引入.mp4 Day2-15.Layout-一级导航渲染.mp4 Day2-16.Layout-吸顶导航交互实现.mp4 Day2-17.Layout-Pinia优化重复请求.mp4 Vue3小兔鲜 – day03 Day3-01.Home-整体结构拆分和分类实现.mp4 Day3-02.Home-banner轮播图实现.mp4 Day3-03.Home-面板组件封装.mp4 Day3-04.Home-新鲜好物业务实现.mp4 Day3-05.Home-图片懒加载指令实现.mp4 Day3-06.Home-懒加载指令优化.mp4 Day3-07.Home-Product产品列表实现.mp4 Day3-08.Home-GoodsItem组件封装.mp4 Day3-09.一级分类-整体认识和路由配置.mp4 Day3-10.一级分类-面包屑导航渲染.mp4 Day3-11.一级分类-轮播图功能实现.mp4 Day3-12.一级分类-激活状态控制和分类列表渲染.mp4 Day3-13.一级分类-解决路由缓存问题.mp4 Day3-14.一级分类-使用逻辑函数拆分业务.mp4 Vue3小兔鲜 – day04 Day4-01.二级分类-整体认识和路由配置.mp4 Day4-02.二级分类-面包屑导航实现.mp4 Day4-03.二级分类-基础商品列表实现.mp4 Day4-04.二级分类-列表筛选功能实现.mp4 Day4-05.二级分类-列表无限加载实现.mp4 Day4-06.二级分类-定制路由滚动行为.mp4 Day4-07.详情页-整体认识和路由配置.mp4 Day4-08.详情页-基础数据渲染.mp4 Day4-09.详情页-热榜区-基础组件封装和数据渲染.mp4 Day4-10.详情页-热榜区-适配不同title和数据列表.mp4 Day4-11.详情页-图片预览组件-小图切换大图显示.mp4 Day4-12.详情页-图片预览组件-放大镜-滑块跟随移动.mp4 Day4-13.详情页-图片预览组件-放大镜-大图效果实现.mp4 Day4-14.详情页-图片预览组件-props适配和整体总结.mp4 Day4-15.详情页-SKU组件熟悉使用.mp4 Day4-16.详情页-通用组件统一注册全局.mp4 Vue3小兔鲜 – day05 Day5-01.登录-整体认识和路由配置.mp4 Day5-02.登录-表单校验实现.mp4 Day5-03.登录-表单校验-自定义校验规则.mp4 Day5-04.登录-表单校验-统一校验.mp4 Day5-05.登录-基础功能实现.mp4 Day5-06.登录-Pinia管理用户数据.mp4 Day5-07.登录-Pinia用户数据持久化.mp4 Day5-08.登录-登录和非登录状态下的模版适配.mp4 Day5-09.登录-请求拦截器携带Token.mp4 Day5-10.登录-退出登录功能实现.mp4 Day5-11.登录-Token失效401拦截处理.mp4 Day5-12.购物车-流程梳理和本地加入购物车实现.mp4 Day5-13.购物车-本地-头部购物车列表渲染.mp4 Day5-14.购物车-本地-头部购物车删除功能实现.mp4 Day5-15.购物车-本地-头部购物车统计计算.mp4 Vue3小兔鲜 – day06 Day6-01.购物车-本地-列表购物车基础数据渲染.mp4 Day6-02.购物车-本地-列表购物车单选功能.mp4 Day6-03.购物车-本地-购物车列表全选功能.mp4 Day6-04.购物车-本地-购物车列表统计数据实现.mp4 Day6-05.购物车-接口-加入购物车.mp4 Day6-06.购物车-接口-删除购物车.mp4 Day6-07.退出登录-清空购物车数据.mp4 Day6-08.购物车-合并本地购物车到服务器.mp4 Day6-09.结算-路由配置和基础数据渲染.mp4 Day6-10.结算-地址切换-打开弹框交互实现.mp4 Day6-11.结算-切换地址-地址激活交互实现.mp4 Day6-12.结算-生成订单功能实现.mp4 Day6-13.支付-渲染基础数据.mp4 Day6-14.支付-实现支付功能.mp4 Day6-15.支付-支付结果展示.mp4 Day6-16.支付-封装倒计时函数.mp4 Vue3小兔鲜 – day07 Day7-01.会员中心-整体功能梳理和路由配置.mp4 Day7-02.会员中心-个人中心信息渲染.mp4 Day7-03.会员中心-我的订单-基础订单列表实现.mp4 Day7-04.会员中心-我的订单-tab切换实现.mp4 Day7-05.会员中心-我的订单-分页逻辑实现.mp4 Day7-06.会员中心-细节优化.mp4 Day7-07.拓展课-SKU组件-功能拆解.mp4 Day7-08.拓展课-SKU组件-点击规格更新选中状态.mp4 Day7-09.拓展课-SKU组件-获取有效路径字典.mp4 Day7-10.拓展课-SKU组件-初始化时更新禁用状态.mp4 Day7-11.拓展课-SKU组件-点击时组合更新禁用状态.mp4 Day7-12.拓展课-SKU组件-产出有效的SKU对象信息.mp4