Vue3.0小兔鲜儿企业级电商项目开发实战 - 完结无密

课程简介

本课程从零开始使用Vue3.0开发企业级电商项目“小兔鲜儿”，基于本项目，系统讲解了项目搭建、Vue3.0技术栈、常用组件开发、项目核心模块开发等，在实战中牢牢掌握Vue3.0知识体系，深入掌握组件封装的原理，快速提升实战开发经验与组件化开发思维。

为什么要学习本课程

课程项目介绍

1. 深入剖析电商B2C平台，强力对接企业级项目业务需求及功能，快速构建完整规范的电商业务体系及架构。
2. 深度讲解电商核心业务SKU业务,购物车业务,订单管理业务，支付业务。
3. VUE3.0大型项目较佳实践，VUE3.0组件库封装，深入组件库封装原理。

对标大厂电商平台 综合品类商品还原线上购物全场景

Sku前端实现，支付宝真支付

课程目录

01.Vue3.0组合式API-1（10节）

1.01-为什么学vue3
2.02-vite基本使用9分钟
3.03-创建vue应用11分钟
4.04-选项API和组合API15分钟
5.05-组合API-setup函数14分钟
6.06-组合API-生命周期12分钟
7.07-组合API-reactive函数12分钟
8.08-组合API-toRef函数13分钟
9.09-组合API-toRefs函数15分钟
10.10-组合API-ref函数17分钟

02.Vue3.0组合式API-2（9节）

1.11-知识运用案例16分钟
2.12-组合API-computed函数-01基本使用9分钟
3.12-组合API-computed函数-02高级使用11分钟
4.13-组合API-watch函数28分钟
5.13-组合API-watch函数-需要深度监听情况3分钟
6.14-组合API-ref属性24分钟
7.15-组合API-父子通讯-01父传子14分钟
8.15-组合API-父子通讯-02子传父12分钟
9.16-组合API-依赖注入24分钟

03.项目起步（10节）

1.01-补充-v-model语法糖18分钟
2.02-补充-mixins语法29分钟
3.03-项目介绍13分钟
4.04-配套资源9分钟
5.05-使用技术7分钟
6.06-前情提要6分钟
7.07-创建项目10分钟
8.08-目录调整-01调整代码和目录18分钟
9.09-目录调整-额外配置文件8分钟
10.10-vuex-vue3.0的根模块各种用法15分钟

04.项目搭建（10节）

1.11-vuex-vue3.0模块的用法20分钟
2.12-准备远端仓库查看代码4分钟
3.13-vuex-持久化22分钟
4.14-请求工具-01创建新axios实例&请求拦截器16分钟
5.15-请求工具-响应拦截器23分钟
6.16-请求工具-03-请求函数封装14分钟
7.17-请求工具-04-测试请求工具函数9分钟
8.18-路由设计7分钟
9.19-首页-路由与组件8分钟
10.20-首页-less的自动化导入-01混入文件14分钟

05.项目搭建2（1节）

1.21-首页-less的自动化导入-02自动导入11分钟

06.项目架构1（9节）

1.01-昨日回顾&今日介绍11分钟
2.02-首页-样式重置与公用9分钟
3.03-首页-顶部通栏布局14分钟
4.04-首页-setup使用vuex数据需要计算属性3分钟
5.05-首页-头部布局5分钟
6.06-首页-底部布局4分钟
7.07-首页-头部分类导航组件12分钟
8.08-首页-头部分类导航渲染25分钟
9.09-首页-头部分类导航交互24分钟

07.项目架构2（6节）

1.10-首页-吸顶头部组件-传统实现17分钟
2.11-首页-吸顶头部组件-组合API13分钟
3.12-首页主体-左侧分类-结构渲染21分钟
4.13-首页主体-左侧分类-弹层展示14分钟
5.14-首页主体-左侧分类-处理品牌25分钟
6.15-首页主体-左侧分类-骨架效果36分钟

08.首页模块（10节）

1.01-昨日回顾&今日介绍8分钟
2.02-首页主体-轮播图-基础布局16分钟
3.03-首页主体-轮播图-渲染结构13分钟
4.04-首页主体-轮播图-逻辑封装30分钟
5.05-首页主体-面板封装15分钟
6.06-首页主体-新鲜好物7分钟
7.07-首页主体-人气推荐8分钟
8.08-首页主体-补充-vue动画26分钟
9.09-首页主体-面板骨架效果14分钟
10.10-首页主体-组件数据懒加载28分钟

09.首页模块2（7节）

1.11-首页主体-组件数据懒加载-补充8分钟
2.12-首页主体-热门品牌-01基础功能17分钟
3.13-首页主体-热门品牌-02骨架和数据懒加载9分钟
4.14-首页主体-商品区块26分钟
5.15-首页主体-最新专题8分钟

6.IntersectionObserver了解8分钟

7.17-首页主体-图片懒加载-02-懒加载指令29分钟

10.首页模块3（10节）

1.00-昨日回顾&今日介绍5分钟
2.01-顶级类目-面包屑组件-初级17分钟
3.02-顶级类目-面包屑组件-高级-01过渡23分钟
4.02-顶级类目-面包屑组件-高级-02终极37分钟
5.03-顶级类目-批量注册组件17分钟
6.04-顶级类目-基础布局搭建19分钟
7.04-顶级类目-基础布局搭建-改造2分钟
8.05-顶级类目-分类商品-布局5分钟
9.06-顶级类目-分类商品-展示19分钟
10.07-顶级类目-面包屑切换动画17分钟

11.首页模块4（3节）

1.08-二级类目-处理跳转细节18分钟
2.09-二级类目-展示面包屑19分钟
3.10-二级类目-筛选区展示45分钟

12.一级类目（10节）

1.00-昨日回顾&今日介绍7分钟
2.01-二级类目-复选框组件封装38分钟
3.02-二级类目-结果区-排序组件28分钟
4.03-二级类目-结果区-数据加载-无限加载组件28分钟
5.04-二级类目-使用无限加载数据加载商品数据23分钟
6.05-二级类目-结果区-进行筛选-01-排序18分钟
7.06-二级类目-结果区-进行筛选-02-筛选30分钟
8.07-商品详情-基础布局7分钟
9.08-商品详情-渲染面包屑26分钟
10.09-商品详情-图片预览组件8分钟

13.一级类目2（2节）

1.10-商品详情-图片放大镜38分钟
2.11-商品详情-基本信息展示7分钟

14.组件及商品详情（10节）

1.00-昨日回顾&今日介绍5分钟
2.01-商品详情-城市组件-基础布局22分钟
3.02-商品详情-城市组件-获取数据39分钟
4.03-商品详情-城市组件-交互逻辑42分钟
5.04-★规格组件-SKU&SPU概念11分钟
6.05-★规格组件-基础结构和样式4分钟
7.06-★规格组件-渲染与选中效果23分钟
8.07-★规格组件-禁用效果-思路分析27分钟
9.08-★规格组件-禁用效果-路径字典33分钟
10.09-★规格组件-禁用效果-设置状态42分钟

15.规格组件（10节）

1.00-昨日反馈&今日介绍5分钟
2.01-梳理下SKU组件选中和禁用功能18分钟
3.02-规格组件-01根据skuId默认选中按钮21分钟
4.03-规格组件-02选择sku后通知父组件28分钟
5.04-商品详情-数量选择组件21分钟
6.05-商品详情-按钮组件9分钟
7.06-商品详情-同类推荐组件37分钟
8.07-商品详情-标签页组件21分钟
9.08-商品详情-热榜组件20分钟
10.09-商品详情-详情组件12分钟

16.商品详情（5节）

1.10-商品详情-注意事项组件2分钟
2.11-商品详情-评价组件-头部渲染25分钟
3.12-实现列表-01需求确认&基本布局8分钟
4.12-实现列表-02筛选参数准备&获取数据25分钟
5.12-实现列表-03完成渲染&格式化函数19分钟

17.商品详情-评价组件（6节）

1.00-昨日反馈&今日介绍10分钟
2.02-商品详情-评价组件-图片预览15分钟
3.03-分页组件-01依赖数据分析19分钟
4.04-分页组件-02得到需要的数据33分钟
5.04-分页组件-03渲染组件和切换分页11分钟
6.04-分页组件-04数据通讯和使用30分钟

18.登录标单校验（9节）

1.05-登录-路由与组件3分钟
2.06-登录-基础布局9分钟
3.07-登录-切换效果4分钟
4.08-登录-表单组件9分钟
5.09-登录-表单校验-01-大致步骤9分钟
6.09-登录-表单校验-02-基本使用22分钟
7.09-登录-表单校验-03-完成所有校验42分钟
8.10-登录-消息提示组件封装-基本功能和动画24分钟
9.10-登录-消息提示组件封装-02函数式调用34分钟

19.登录（10节）

1.00-昨日反馈&今日介绍6分钟
2.01-登录-账户登录23分钟
3.02-手机登录-01思路分析&发送验证码36分钟
4.03-登录-手机号登录-02完成登录13分钟
5.04-退出登录4分钟
6.05-登录-QQ登录-流程分析9分钟
7.06-登录-QQ登录-按钮处理-01-本地host16分钟
8.07-登录-QQ登录-按钮处理-02-按钮跳转21分钟
9.08-登录-QQ登录-回跳页面-01-基础布局10分钟
10.09-回跳页面-02绑定帐号&完善信息组件6分钟

20.QQ登录表单校验（6节）

1.10-登录-QQ登录-已注册已绑定42分钟
2.11-已注册未绑定-01获取标识昵称头像15分钟
3.12-登录-QQ登录-已注册未绑定-02-表单校验9分钟
4.13-已注册未绑定-03发送短信验证码9分钟
5.14-登录-QQ登录-已注册未绑定-04-立即绑定10分钟
6.15-登录-QQ登录-未绑定没账号36分钟

21.加入购物车分析（10节）

1.00-每日反馈&今日介绍13分钟
2.01-购物车功能分析10分钟
3.02-加入购物车-本地52分钟
4.03-头部购物车-基础布局&渲染30分钟
5.04-头部购物车-商品列表-本地48分钟
6.05-头部购物车-删除操作-本地13分钟
7.06-购物车页面-基础布局9分钟
8.07-购物车页面-列表展示-本地31分钟
9.08-购物车页面-单选操作-本地19分钟
10.09-购物车页面-全选操作-本地12分钟

22.购物车界面（2节）

1.10-购物车页面-删除操作-本地8分钟
2.11-购物车页面-确认框组件47分钟

23.购物车批量删除（10节）

1.00-每日反馈&今日介绍13分钟
2.01-昨日回顾&今日介绍7分钟
3.02-购物车页面-批量删除-本地8分钟
4.03-购物车页面-无效商品-本地6分钟
5.04-购物车页面-修改数量-本地7分钟
6.05-修改规格-本地-01组件准备和切换效果12分钟
7.05-购物车页面-修改规格-本地-02-渲染规格16分钟
8.05-购物车页面-修改规格-本地-03-修改规格29分钟
9.06-登录后-合并购物车25分钟
10.07-登录后-商品列表6分钟

24.登录合并购物车（10节）

1.08-登录后-加入购物车13分钟
2.09-登录后-删除操作7分钟
3.10-登录后-批量删除5分钟
4.11-登录后-选中状态&修改数量7分钟
5.12-登录后-修改规格 (1)11分钟
6.13-登录后-修改规格 (2)7分钟
7.14-下单结算23分钟
8.15-结算-页面布局5分钟
9.16-结算-渲染页面-01-获取数据&渲染结算18分钟
10.17-结算-渲染页面-收货地址默认渲染24分钟

25.结算界面（9节）

1.00-昨日回顾&今日内容7分钟
2.01-结算-对话框组件封装-01基本结构16分钟
3.02-结算-对话框组件封装-02双向绑定23分钟
4.03-结算-通知结算组件一个默认地址的ID23分钟
5.04-结算-收货地址-切换-完成切换功能24分钟
6.05-结算-收货地址-添加-准备对话框和表单20分钟
7.06-结算-收货地址-添加-添加收货地址完成35分钟
8.07-结算-收货地址-修改21分钟
9.08-结算-提交订单19分钟

26.支付宝支付（6节）

1.09-支付-支付页面-基础布局4分钟
2.10-支付-支付页面-01获取数据展示金额10分钟
3.10-支付-支付页面-02倒计时函数封装30分钟
4.11-支付-支付流程10分钟
5.12-支付-等待支付和跳转支付宝20分钟
6.13-支付-结果展示11分钟

27.个人中心页面渲染（8节）

1.00-昨日反馈&今日内容8分钟
2.01-个人中心-布局容器11分钟
3.02-个人中心-基础布局12分钟
4.03-个人中心-渲染页面8分钟
5.04-个人中心-mock数据32分钟
6.05-个人中心-模拟接口31分钟
7.06-个人中心-routerlink的激活类名16分钟
8.06-个人中心-菜单激活-02-嵌套路由写法改造23分钟

28.订单管理组件（7节）

1.07-订单管理-tabs组件-01-体验jsx语法22分钟
2.07-订单管理-tabs组件-02-动态渲染结构39分钟
3.07-订单管理-tabs组件-03-实现双向绑定26分钟
4.07-订单管理-tabs组件-04使用组件渲染订单23分钟
5.08-订单管理-基础布局8分钟
6.09-订单管理-列表渲染-01-抽离组件获取数据11分钟
7.09-订单管理-列表渲染-02渲染订单组件23分钟

29.订单管理（10节）

1.00-昨日回顾&今日内容3分钟
2.01-订单管理-条件查询22分钟
3.02-订单管理-取消订单34分钟
4.03-订单管理-删除订单9分钟
5.订单管理-确认收货14分钟
6.订单管理-查看物流22分钟
7.订单详情-头部展示13分钟
8.订单详情-steps组件34分钟
9.订单详情-async的setup组件使用19分钟
10.订单详情-商品信息5分钟

30.订单详情功能完善（6节）

1.订单详情-取消订单5分钟
2.订单详情-确认收货2分钟
3.再次购买14分钟
4.总结-划重点9分钟
5.总结-vue3.0踩过的坑6分钟
6.Vue3.0关注功能18分钟