Vue腾讯课堂.Vue3.0小兔鲜儿电商项目

前端开发

课程简介

# Vue3 电商项目实战导读这套课程的核心目标，是教你从零开始构建一个具备完整业务逻辑的前端单页应用。它不局限于语法讲解，而是直接切入一个电商系统的开发流程，重点解决“如何组织大规模 Vue 项目代码”以及“如何封装高复用性业务组件”这两个实际工作中最头疼的问题。相比零散的知识点视频，这种项目驱动的方式更适合希望快速建立全局视野的开发者。 **适合人群…

已有 0 人浏览发布 2026-10-24 更新 2026-10-24

# Vue3 电商项目实战导读

这套课程的核心目标，是教你从零开始构建一个具备完整业务逻辑的前端单页应用。它不局限于语法讲解，而是直接切入一个电商系统的开发流程，重点解决“如何组织大规模 Vue 项目代码”以及“如何封装高复用性业务组件”这两个实际工作中最头疼的问题。相比零散的知识点视频，这种项目驱动的方式更适合希望快速建立全局视野的开发者。

**适合人群与前置基础**
这套内容主要面向已经掌握 HTML/CSS/JS 基础，并且对 Vue2 有一定概念，但希望系统掌握 Vue3 组合式 API 及大型工程化开发的中级前端工程师。如果你是完全零基础的新手，建议先补充 Vue 基础语法再进入本项目，否则在理解组件通信、状态管理等环节时会非常吃力。课程没有提供低强度的语法入门，而是假设读者已经能看懂基本代码，重点在于工程实践。

**学习路径与建议切入点**
建议不要从头到尾线性观看，而是采用“骨架优先”的策略。首先浏览“项目起步”部分，理解 Vue3 项目的目录结构调整和 Vuex 根模块的使用，这是后续所有开发的基石。接着重点研习“首页模块”和“一级类目”章节，这里涵盖了轮播图逻辑封装、无限加载、筛选排序等高频业务场景，是锻炼组件思维的最佳素材。最后再深入“购物车”部分，体验复杂状态管理下的数据流转。

**学完能独立做什么**
完成全套课程后，你将能够独立搭建一个具备搜索、筛选、详情展示及购物车管理的电商前端应用。更重要的是，你掌握了如何将复杂 UI 拆分为可复用组件，如何通过状态管理处理跨页面数据同步，以及如何处理异步数据加载。这些能力可以直接迁移到任何中后台管理系统或业务型 Web 项目开发中，能让你在团队中承担更完整的模块开发任务。

**资料配合练习方法**
视频中的代码演示节奏较快，建议配合“配套资源”中的代码文件进行跟写。每看完一个功能模块（如轮播图或筛选器），务必暂停视频，尝试自行在项目中复现该功能。遇到报错时，先查阅官方文档或调试工具，再回过头看视频中的解决方案。特别是“修改规格”和“合并购物车”等涉及多步骤交互的功能，务必手动敲码验证，只有亲手写过，才能真正理解组件生命周期的触发时机和数据流的闭环。

课程目录

📁 03-项目起步
03-项目介绍.mp4 [164.4 MB]
06-前情提要【更多精选‖公众号：CunWorknotes】 .mp4 [42.6 MB]
05-使用技术.mp4 [64.2 MB]
09-目录调整-额外配置文件.mp4 [56.0 MB]
07-创建项目.mp4 [87.7 MB]
01-补充-v-model语法糖.mp4 [216.1 MB]
02-补充-mixins语法.mp4 [320.8 MB]
08-目录调整-01调整代码和目录.mp4 [132.8 MB]
10-vuex-vue3.0的根模块各种用法.mp4 [146.5 MB]
04-配套资源.mp4 [90.1 MB]
📁 12-一级类目
07-商品详情-基础布局.mp4 [79.8 MB]
03-二级类目-结果区-数据加载-无限加载组件.mp4 [344.5 MB]
05-二级类目-结果区-进行筛选-01-排序【不易整理‖请关注：CunWorkNoteS】.mp4 [245.5 MB]
09-商品详情-图片预览组件.mp4 [104.8 MB]
04-二级类目-使用无限加载数据加载商品数据.mp4 [310.0 MB]
00-昨日回顾&今日介绍.mp4 [62.0 MB]
02-二级类目-结果区-排序组件.mp4 [394.3 MB]
08-商品详情-渲染面包屑.mp4 [360.1 MB]
06-二级类目-结果区-进行筛选-02-筛选.mp4 [415.6 MB]
01-二级类目-复选框组件封装.mp4 [513.7 MB]
📁 23-购物车批量删除
07-登录后-商品列表【不易整理‖请关注：CunWorkNoteS】.mp4 [72.9 MB]
02-购物车页面-批量删除-本地.mp4 [88.0 MB]
05-购物车页面-修改规格-本地-03-修改规格.mp4 [411.0 MB]
04-购物车页面-修改数量-本地【资源精选‖更多关注：CunworkNotes】.mp4 [82.0 MB]
03-购物车页面-无效商品-本地.mp4 [74.6 MB]
05-修改规格-本地-01组件准备和切换效果.mp4 [148.0 MB]
06-登录后-合并购物车.mp4 [340.4 MB]
01-昨日回顾&今日介绍.mp4 [76.9 MB]
05-购物车页面-修改规格-本地-02-渲染规格.mp4 [209.9 MB]
00-每日反馈&今日介绍.mp4 [150.4 MB]
📁 08-首页模块
01-昨日回顾&今日介绍【优质资源‖关注：cunWorkNotes 解锁】.mp4 [101.4 MB]
08-首页主体-补充-vue动画.mp4 [277.3 MB]
04-首页主体-轮播图-逻辑封装.mp4 [396.1 MB]
07-首页主体-人气推荐.mp4 [101.5 MB]
09-首页主体-面板骨架效果.mp4 [189.3 MB]
02-首页主体-轮播图-基础布局.mp4 [206.0 MB]
10-首页主体-组件数据懒加载.mp4 [375.4 MB]
03-首页主体-轮播图-渲染结构.mp4 [161.2 MB]
05-首页主体-面板封装.mp4 [202.8 MB]
06-首页主体-新鲜好物.mp4 [90.2 MB]
📁 18-登录表单校验
09-登录-表单校验-01-大致步骤.mp4 [106.9 MB]
10-登录-消息提示组件封装-02函数式调用【优质资源‖关注：cunWorkNotes 解锁】.mp4 [461.5 MB]
07-登录-切换效果【不易整理‖请关注：CunWorkNoteS】.mp4 [48.6 MB]
10-登录-消息提示组件封装-基本功能和动画.mp4 [302.3 MB]
06-登录-基础布局.mp4 [99.2 MB]
09-登录-表单校验-02-基本使用【资源精选‖更多关注：CunworkNotes】.mp4 [317.5 MB]
09-登录-表单校验-03-完成所有校验.mp4 [596.8 MB]
08-登录-表单组件.mp4 [121.1 MB]
05-登录-路由与组件.mp4 [25.5 MB]
📁 15-规格组件
08-商品详情-热榜组件【公重号：CunWorkNotes】.mp4 [273.0 MB]
07-商品详情-标签页组件.mp4 [279.7 MB]
02-规格组件-01根据skuId默认选中按钮【资源精选‖更多关注：CunworkNotes】.mp4 [282.9 MB]
00-昨日反馈&今日介绍【优质资源‖关注：cunWorkNotes 解锁】.mp4 [44.4 MB]
06-商品详情-同类推荐组件.mp4 [528.2 MB]
05-商品详情-按钮组件.mp4 [104.0 MB]
09-商品详情-详情组件.mp4 [166.0 MB]
04-商品详情-数量选择组件.mp4 [287.2 MB]
03-规格组件-02选择sku后通知父组件.mp4 [398.2 MB]
01-梳理下SKU组件选中和禁用功能.mp4 [139.4 MB]
📁 19-登录
08-登录-QQ登录-回跳页面-01-基础布局【公重号：CunWorkNotes】.mp4 [114.0 MB]
05-登录-QQ登录-流程分析.mp4 [94.8 MB]
03-登录-手机号登录-02完成登录.mp4 [185.2 MB]
02-手机登录-01思路分析&发送验证码.mp4 [501.1 MB]
09-回跳页面-02绑定帐号&完善信息组件.mp4 [69.5 MB]
04-退出登录.mp4 [50.2 MB]
01-登录-账户登录.mp4 [312.8 MB]
06-登录-QQ登录-按钮处理-01-本地host.mp4 [198.7 MB]
00-昨日反馈&今日介绍.mp4 [49.4 MB]
07-登录-QQ登录-按钮处理-02-按钮跳转.mp4 [307.3 MB]
📁 01-vue3.0组合式API-1
04-选项API和组合API【不易整理‖请关注：CunWorkNoteS】.mp4 [145.0 MB]
06-组合API-生命周期.mp4 [115.5 MB]
03-创建vue应用【持续更新‖免费提供：CunworknoteS】.mp4 [67.6 MB]
05-组件API-setup函数.mp4 [106.6 MB]
08-组合API-toRef函数.mp4 [115.6 MB]
01-为什么学习vue3.mp4 [78.3 MB]
09-组合API-toRefs函数.mp4 [150.0 MB]
02-vite基本使用.mp4 [74.5 MB]
07-组合API-reactive函数.mp4 [95.7 MB]
10-组合API-ref函数.mp4 [157.4 MB]
📁 24-登录合并购物车
17-结算-渲染页面-收货地址默认渲染.mp4 [332.3 MB]
12-登录后-修改规格 (1)【更多精选‖公众号：CunWorknotes】 .mp4 [135.2 MB]
09-登录后-删除操作.mp4 [77.9 MB]
15-结算-页面布局.mp4 [57.2 MB]
08-登录后-加入购物车.mp4 [168.2 MB]
13-登录后-修改规格 (2).mp4 [82.1 MB]
11-登录后-选中状态&修改数量.mp4 [78.1 MB]
14-下单结算.mp4 [292.8 MB]
16-结算-渲染页面-01-获取数据&渲染结算.mp4 [239.0 MB]
10-登录后-批量删除.mp4 [45.4 MB]
📁 30-订单详情功能完善
15-Vue3.0关注功能.mp4 [219.0 MB]
11-订单详情-确认收货【整理不易‖记得关注：CunWorKNotes】.mp4 [20.1 MB]
12-再次购买.mp4 [179.1 MB]
13-总结-划重点.mp4 [89.7 MB]
14-总结-vue3.0踩过的坑.mp4 [50.8 MB]
10-订单详情-取消订单.mp4 [62.1 MB]
📁 10-首页模块3
06-顶级类目-分类商品-展示.mp4 [255.8 MB]
02-顶级类目-面包屑组件-高级-02终极.mp4 [467.4 MB]
04-顶级类目-基础布局搭建.mp4 [262.1 MB]
01-顶级类目-面包屑组件-初级.mp4 [207.3 MB]
02-顶级类目-面包屑组件-高级-01过渡.mp4 [285.1 MB]
00-昨日回顾&今日介绍.mp4 [48.8 MB]
05-顶级类目-分类商品-布局.mp4 [57.1 MB]
07-顶级类目-面包屑切换动画.mp4 [211.9 MB]
04-顶级类目-基础布局搭建-改造.mp4 [13.9 MB]
03-顶级类目-批量注册组件.mp4 [220.8 MB]
📁 09-首页模块2
12-首页主体-热门品牌-01基础功能.mp4 [236.5 MB]
16-IntersectionObserver了解.mp4 [92.4 MB]
17-首页主体-图片懒加载-02-懒加载指令.mp4 [400.5 MB]
13-首页主体-热门品牌-02骨架和数据懒加载.mp4 [114.1 MB]
14-首页主体-商品区块.mp4 [369.4 MB]
11-首页主体-组件数据懒加载-补充.mp4 [98.8 MB]
15-首页主体-最新专题.mp4 [109.7 MB]
📁 27-个人中心页面渲染
02-个人中心-基础布局.mp4 [151.8 MB]
04-个人中心-mock数据【资源精选‖更多关注：CunworkNotes】.mp4 [413.2 MB]
06-个人中心-菜单激活-02-嵌套路由写法改造.mp4 [301.0 MB]
01-个人中心-布局容器.mp4 [144.6 MB]
05-个人中心-模拟接口.mp4 [430.6 MB]
03-个人中心-渲染页面.mp4 [101.5 MB]
06-个人中心-routerlink的激活类名.mp4 [207.0 MB]
00-昨日反馈&今日内容.mp4 [83.4 MB]
📁 17-商品详情-评价组件
04-分页组件-04数据通讯和使用.mp4 [425.0 MB]
04-分页组件-03渲染组件和切换分页.mp4 [145.7 MB]
03-分页组件-01依赖数据分析.mp4 [240.8 MB]
02-商品详情-评价组件-图片预览.mp4 [205.8 MB]
00-昨日反馈&今日介绍.mp4 [74.4 MB]
04-分页组件-02得到需要的数据.mp4 [455.0 MB]
📁 29-订单管理
00-昨日回顾&今日内容【公重号：CunWorkNotes】.mp4 [16.3 MB]
08-订单详情-async的setup组件使用【整理不易‖记得关注：CunWorKNotes】.mp4 [246.3 MB]
02-订单管理-取消订单.mp4 [474.3 MB]
03-订单管理-删除订单.mp4 [124.2 MB]
06-订单详情-头部展示.mp4 [178.3 MB]
09-订单详情-商品信息.mp4 [55.8 MB]
07-订单详情-steps组件.mp4 [450.7 MB]
05-订单管理-查看物流.mp4 [306.0 MB]
01-订单管理-条件查询.mp4 [297.3 MB]
04-订单管理-确认收货.mp4 [191.0 MB]
📁 02-vue3.0组合式API-2
11-知识运用案例.mp4 [167.6 MB]
15-组合API-父子通信-02子传父【更多精选‖公众号：CunWorknotes】 .mp4 [114.9 MB]
14-组合API-ref属性【优质资源‖关注：cunWorkNotes 解锁】.mp4 [255.5 MB]
12-组合API-computed函数-01基本使用.mp4 [70.4 MB]
12-组合API-computed函数-02高级使用.mp4 [99.7 MB]
13-组合API-watch函数-需要深度监听情况.mp4 [21.6 MB]
13-组合API-watch函数.mp4 [295.4 MB]
16-组合API-依赖注入.mp4 [245.7 MB]
15-组合API-父子通信-01父传子.mp4 [122.2 MB]
📁 20-QQ登录表单校验
12-登录-QQ登录-已注册未绑定-02-表单校验.mp4 [119.7 MB]
15-登录-QQ登录-未绑定没账号.mp4 [517.5 MB]
10-登录-QQ登录-已注册已绑定.mp4 [591.1 MB]
11-已注册未绑定-01获取标识昵称头像.mp4 [194.7 MB]
14-登录-QQ登录-已注册未绑定-04-立即绑定.mp4 [137.8 MB]
13-已注册未绑定-03发送短信验证码.mp4 [107.3 MB]
📁 21-加入购物车分析
07-购物车页面-列表展示-本地.mp4 [430.8 MB]
00-每日反馈&今日介绍.mp4 [150.4 MB]
03-头部购物车-基础布局&渲染.mp4 [433.0 MB]
01-购物车功能分析.mp4 [95.3 MB]
08-购物车页面-单选操作-本地.mp4 [259.7 MB]
09-购物车页面-全选操作-本地【整理不易‖记得关注：CunWorKNotes】.mp4 [137.6 MB]
04-头部购物车-商品列表-本地.mp4 [633.3 MB]
05-头部购物车-删除操作-本地.mp4 [165.4 MB]
06-购物车页面-基础布局.mp4 [117.0 MB]
02-加入购物车-本地.mp4 [673.8 MB]
📁 28-订单管理组件
07-订单管理-tabs组件-01-体验jsx语法.mp4 [241.9 MB]
09-订单管理-列表渲染-01-抽离组件获取数据【不易整理‖请关注：CunWorkNoteS】.mp4 [136.9 MB]
09-订单管理-列表渲染-02渲染订单组件【更多精选‖公众号：CunWorknotes】 .mp4 [334.4 MB]
07-订单管理-tabs组件-04使用组件渲染订单.mp4 [334.4 MB]
07-订单管理-tabs组件-02-动态渲染结构.mp4 [496.3 MB]
08-订单管理-基础布局.mp4 [99.6 MB]
07-订单管理-tabs组件-03-实现双向绑定.mp4 [357.2 MB]
📁 05-项目搭建2
21-首页-less的自动化导入-02自动导入【更多精选‖公众号：CunWorknotes】 .mp4 [145.9 MB]
📁 06-项目架构1
03-首页-顶部通栏布局【整理不易‖记得关注：CunWorKNotes】.mp4 [189.2 MB]
05-首页-头部布局.mp4 [52.4 MB]
04-首页-setup使用vuex数据需要计算属性.mp4 [22.8 MB]
09-首页-头部分类导航交互.mp4 [319.4 MB]
08-首页-头部分类导航渲染.mp4 [327.8 MB]
07-首页-头部分类导航组件.mp4 [158.8 MB]
01-昨日回顾&今日介绍.mp4 [125.7 MB]
02-首页-样式重置与公用.mp4 [112.2 MB]
📁 07-项目架构2
12-首页主体-左侧分类-结构渲染【整理不易‖记得关注：CunWorKNotes】.mp4 [303.3 MB]
… 其余 66 项略，目录共 266 项