课程定位与适用基础

本课程专门针对希望快速掌握 Vue3.0 在企业级电商项目中的实战技能的自学者设计，尤其适合已有一定前端基础（HTML/CSS/JS）但对 Vue3.0 新特性（如组合式 API）感到陌生或想提升开发效率的开发者。如果你是前端新手或对 Vue2 不熟悉，强烈建议先学习 Vue2 的基本概念和组件开发流程，再学习本课程。

学习流程与章节推荐

为了高效学习，我们建议按照以下顺序进行： 1. **入门篇**（第一到第三讲）：首先了解 Vue3.0 为何重要，以及如何快速上手 Vite 框架。这会帮助你建立对 Vue3 开发模式的直觉。 2. **组合式 API 学习**（第四到第九讲）：深入理解 Vue3.0 的核心特性——组合式 API，这是构建响应式应用的关键。 3. **高级特性与应用**（第十到第十六讲）：通过实际案例和应用场景，进一步巩固组合式 API 的使用，掌握计算属性（computed）、 watchers、依赖注入（dependency injection）等高级功能。 4. **项目实践**（第十七到第二十讲）：结合小兔鲜儿电商项目，将所学知识应用到实际开发中，提升项目开发能力。 5. **补充与扩展**（第二十一到第二十三讲）：最后，通过补充内容（如 v-model 和 mixins），完善你的 Vue3.0 技能体系。

学完本课程后你能做什么

完成本课程后，你将能够： - 独立使用 Vue3.0 和 Vite 框架开发企业级电商应用。 - 熟练运用组合式 API，实现复杂的响应式数据管理和事件处理。 - 构建完整的电商应用原型，包括商品展示、用户交互、购物车和结算等功能。

资料包使用指南

资料包中的文件主要用于辅助你理解课程内容： - **Vue3.0 组合式 API 系列**：这些文件详细讲解了组合式 API 的各个部分，包括 setup、ref、reactive、computed、watch 等，是你掌握 Vue3.0 核心特性的关键。 - **项目实践**：提供了小兔鲜儿电商项目的代码框架，你可以根据课程内容进行修改和扩展。 - **补充内容**：包含 v-model 和 mixins 的使用说明，帮助你完善 Vue3.0 的技能体系。

学习建议

- **动手实践**：学习过程中，尽量自己动手实现代码，遇到困难时再参考资料。只有通过实践，才能真正掌握知识。 - **笔记整理**：学习后，整理自己的学习笔记和代码示例，这有助于长期记忆和复习。 - **定期回顾**：定期回顾课程内容，巩固所学知识，避免遗忘。 记住，学习编程是一个持续的过程，不要期望一次学习就能完全掌握所有内容。耐心练习，逐步提高你的 Vue3.0 开发能力。

课程目录

课程内容： Vue3.0小兔鲜儿前端企业级电商项目实战
01-vue3.0组合式API-1
01-为什么学习vue3_ev .mp4 5.66M
02-vite基本使用_ev .mp4 6.62M
03-创建vue应用_ev .mp4 15.41M
04-选项API和组合API_ev .mp4 25.22M
05-组件API-setup函数_ev .mp4 20.41M
06-组合API-生命周期_ev .mp4 21.05M
07-组合API-reactive函数_ev .mp4 9.01M
08-组合API-toRef函数_ev .mp4 21.18M
09-组合API-toRefs函数_ev .mp4 26.80M
10-组合API-ref函数_ev .mp4 26.18M
02-vue3.0组合式API-2
11-知识运用案例_ev .mp4 29.26M
12-组合API-computed函数-01基本使用_ev .mp4 6.32M
12-组合API-computed函数-02高级使用_ev .mp4 18.21M
13-组合API-watch函数-需要深度监听情况_ev .mp4 5.23M
13-组合API-watch函数_ev .mp4 49.35M
14-组合API-ref属性_ev .mp4 40.39M
15-组合API-父子通信-01父传子_ev .mp4 21.46M
15-组合API-父子通信-02子传父_ev .mp4 20.05M
16-组合API-依赖注入_ev .mp4 38.88M
03-项目起步
01-补充-v-model语法糖_ev .mp4 12.74M
02-补充-mixins语法_ev .mp4 22.91M
03-项目介绍_ev .mp4 33.34M
04-配套资源_ev .mp4 15.98M
05-使用技术_ev .mp4 10.66M
06-前情提要_ev .mp4 7.51M
07-创建项目_ev .mp4 6.69M
08-目录调整-01调整代码和目录_ev .mp4 26.00M
09-目录调整-额外配置文件_ev .mp4 11.32M
10-vuex-vue3.0的根模块各种用法_ev .mp4 24.88M
04-项目搭建
11-vuex-vue3.0模块的用法_ev .mp4 13.44M
12-准备远端仓库查看代码_ev .mp4 7.17M
13-vuex-持久化_ev .mp4 38.08M
14-请求工具-01创建新axios实例&请求拦截器_ev .mp4 29.31M
15-请求工具-响应拦截器_ev .mp4 43.02M
16-请求工具-03-请求函数封装_ev .mp4 24.29M
17-请求工具-04-测试请求工具函数_ev .mp4 6.84M
18-路由设计_ev .mp4 14.72M
19-首页-路由与组件_ev .mp4 7.17M
20-首页-less的自动化导入-01混入文件_ev .mp4 12.46M
05-项目搭建2
21-首页-less的自动化导入-02自动导入_ev .mp4 9.70M
06-项目架构1
01-昨日回顾&今日介绍_ev .mp4 20.21M
02-首页-样式重置与公用_ev .mp4 19.19M
03-首页-顶部通栏布局_ev .mp4 30.14M
04-首页-setup使用vuex数据需要计算属性_ev .mp4 5.74M
05-首页-头部布局_ev .mp4 11.64M
07-首页-头部分类导航组件_ev .mp4 32.29M
08-首页-头部分类导航渲染_ev .mp4 52.04M
09-首页-头部分类导航交互_ev .mp4 48.64M
07-项目架构2
10-首页-吸顶头部组件-传统实现_ev .mp4 40.37M
11-首页-吸顶头部组件-组合API_ev .mp4 26.10M
12-首页主体-左侧分类-结构渲染_ev .mp4 50.77M
13-首页主体-左侧分类-弹层展示_ev .mp4 32.94M
14-首页主体-左侧分类-处理品牌_ev .mp4 18.70M
15-首页主体-左侧分类-骨架效果_ev .mp4 71.83M
08-首页模块
01-昨日回顾&今日介绍_ev .mp4 18.36M
02-首页主体-轮播图-基础布局_ev .mp4 34.30M
03-首页主体-轮播图-渲染结构_ev .mp4 25.11M
04-首页主体-轮播图-逻辑封装_ev .mp4 58.97M
05-首页主体-面板封装_ev .mp4 10.80M
06-首页主体-新鲜好物_ev .mp4 14.51M
07-首页主体-人气推荐_ev .mp4 17.94M
08-首页主体-补充-vue动画_ev .mp4 17.20M
09-首页主体-面板骨架效果_ev .mp4 35.34M
10-首页主体-组件数据懒加载_ev .mp4 65.08M
09-首页模块2
11-首页主体-组件数据懒加载-补充_ev .mp4 16.87M
12-首页主体-热门品牌-01基础功能_ev .mp4 38.38M
13-首页主体-热门品牌-02骨架和数据懒加载_ev .mp4 22.41M
14-首页主体-商品区块_ev .mp4 71.07M
15-首页主体-最新专题_ev .mp4 5.99M
16-IntersectionObserver了解_ev .mp4 5.27M
17-首页主体-图片懒加载-02-懒加载指令_ev .mp4 71.40M
10-首页模块3
00-昨日回顾&今日介绍_ev .mp4 3.16M
01-顶级类目-面包屑组件-初级_ev .mp4 11.26M
02-顶级类目-面包屑组件-高级-01过渡_ev .mp4 38.67M
02-顶级类目-面包屑组件-高级-02终极_ev .mp4 61.07M
03-顶级类目-批量注册组件_ev .mp4 32.39M
04-顶级类目-基础布局搭建-改造_ev .mp4 3.82M
04-顶级类目-基础布局搭建_ev .mp4 41.02M
05-顶级类目-分类商品-布局_ev .mp4 11.69M
06-顶级类目-分类商品-展示_ev .mp4 40.80M
07-顶级类目-面包屑切换动画_ev .mp4 10.67M
11-首页模块4
08-二级类目-处理跳转细节_ev .mp4 33.35M
09-二级类目-展示面包屑_ev .mp4 11.90M
10-二级类目-筛选区展示_ev .mp4 28.73M
12-一级类目
00-昨日回顾&今日介绍_ev .mp4 4.30M
01-二级类目-复选框组件封装_ev .mp4 75.13M
02-二级类目-结果区-排序组件_ev .mp4 63.36M
03-二级类目-结果区-数据加载-无限加载组件_ev .mp4 51.16M
04-二级类目-使用无限加载数据加载商品数据_ev .mp4 55.79M
05-二级类目-结果区-进行筛选-01-排序_ev .mp4 38.17M
06-二级类目-结果区-进行筛选-02-筛选_ev .mp4 20.01M
07-商品详情-基础布局_ev .mp4 15.85M
08-商品详情-渲染面包屑_ev .mp4 55.49M
09-商品详情-图片预览组件_ev .mp4 19.88M
13-一级类目2
10-商品详情-图片放大镜_ev .mp4 76.85M
11-商品详情-基本信息展示_ev .mp4 4.28M
14-组件及商品详情
00-昨日回顾&今日介绍_ev .mp4 3.97M
01-商品详情-城市组件-基础布局_ev .mp4 43.55M
02-商品详情-城市组件-获取数据_ev .mp4 73.45M
03-商品详情-城市组件-交互逻辑_ev .mp4 88.22M
04-★规格组件-SKU&SPU概念_ev .mp4 6.98M
05-★规格组件-基础结构和样式_ev .mp4 9.00M
06-★规格组件-渲染与选中效果_ev .mp4 41.77M
07-★规格组件-禁用效果-思路分析_ev .mp4 32.48M
08-★规格组件-禁用效果-路径字典_ev .mp4 63.97M
09-★规格组件-禁用效果-设置状态_ev .mp4 73.99M
15-规格组件
00-昨日反馈&今日介绍_ev .mp4 3.07M
01-梳理下SKU组件选中和禁用功能_ev .mp4 23.20M
02-规格组件-01根据skuId默认选中按钮_ev .mp4 43.67M
03-规格组件-02选择sku后通知父组件_ev .mp4 54.88M
04-商品详情-数量选择组件_ev .mp4 13.79M
05-商品详情-按钮组件_ev .mp4 18.28M
06-商品详情-同类推荐组件_ev .mp4 78.45M
07-商品详情-标签页组件_ev .mp4 42.82M
08-商品详情-热榜组件_ev .mp4 43.71M
09-商品详情-详情组件_ev .mp4 32.28M
16-商品详情
10-商品详情-注意事项组件_ev .mp4 6.37M
11-商品详情-评价组件-头部渲染_ev .mp4 53.93M
12-实现列表-01需求确认&基本布局_ev .mp4 16.13M
12-实现列表-02筛选参数准备&获取数据_ev .mp4 62.68M
12-实现列表-03完成渲染&格式化函数_ev .mp4 13.27M
17-商品详情-评价组件
00-昨日反馈&今日介绍_ev .mp4 7.59M
02-商品详情-评价组件-图片预览_ev .mp4 41.15M
03-分页组件-01依赖数据分析_ev .mp4 33.03M
04-分页组件-02得到需要的数据_ev .mp4 26.09M
04-分页组件-03渲染组件和切换分页_ev .mp4 27.68M
04-分页组件-04数据通讯和使用_ev .mp4 92.08M
18-登录表单校验
05-登录-路由与组件_ev .mp4 6.69M
06-登录-基础布局_ev .mp4 18.50M
07-登录-切换效果_ev .mp4 10.55M
08-登录-表单组件_ev .mp4 23.51M
09-登录-表单校验-01-大致步骤_ev .mp4 17.49M
09-登录-表单校验-02-基本使用_ev .mp4 57.44M
09-登录-表单校验-03-完成所有校验_ev .mp4 95.77M
10-登录-消息提示组件封装-02函数式调用_ev .mp4 66.49M
10-登录-消息提示组件封装-基本功能和动画_ev .mp4 47.72M
19-登录
00-昨日反馈&今日介绍_ev .mp4 3.52M
01-登录-账户登录_ev .mp4 15.65M
02-手机登录-01思路分析&发送验证码_ev .mp4 82.11M
03-登录-手机号登录-02完成登录_ev .mp4 9.19M
04-退出登录_ev .mp4 10.81M
05-登录-QQ登录-流程分析_ev .mp4 13.31M
06-登录-QQ登录-按钮处理-01-本地host_ev .mp4 10.71M
07-登录-QQ登录-按钮处理-02-按钮跳转_ev .mp4 49.10M
08-登录-QQ登录-回跳页面-01-基础布局_ev .mp4 20.05M
09-回跳页面-02绑定帐号&完善信息组件_ev .mp4 12.86M
20-QQ登录表单校验
10-登录-QQ登录-已注册已绑定_ev .mp4 90.17M
11-已注册未绑定-01获取标识昵称头像_ev .mp4 30.96M
12-登录-QQ登录-已注册未绑定-02-表单校验_ev .mp4 21.12M
13-已注册未绑定-03发送短信验证码_ev .mp4 27.34M
14-登录-QQ登录-已注册未绑定-04-立即绑定_ev .mp4 29.23M
15-登录-QQ登录-未绑定没账号_ev .mp4 25.09M
21-加入购物车分析
00-每日反馈&今日介绍_ev .mp4 9.14M
01-购物车功能分析_ev .mp4 7.20M
02-加入购物车-本地_ev .mp4 35.81M
03-头部购物车-基础布局&渲染_ev .mp4 60.83M
04-头部购物车-商品列表-本地_ev .mp4 86.05M
05-头部购物车-删除操作-本地_ev .mp4 25.54M
06-购物车页面-基础布局_ev .mp4 23.38M
07-购物车页面-列表展示-本地_ev .mp4 68.42M
08-购物车页面-单选操作-本地_ev .mp4 12.65M
09-购物车页面-全选操作-本地_ev .mp4 22.54M
22-购物车界面
10-购物车页面-删除操作-本地_ev .mp4 21.77M
11-购物车页面-确认框组件_ev .mp4 93.08M
23-购物车批量删除
00-每日反馈&今日介绍_ev .mp4 8.13M
01-昨日回顾&今日介绍_ev .mp4 11.67M
02-购物车页面-批量删除-本地_ev .mp4 16.71M
03-购物车页面-无效商品-本地_ev .mp4 4.08M
04-购物车页面-修改数量-本地_ev .mp4 4.63M
05-购物车页面-修改规格-本地-02-渲染规格_ev .mp4 10.63M
05-购物车页面-修改规格-本地-03-修改规格_ev .mp4 58.72M
05-修改规格-本地-01组件准备和切换效果_ev .mp4 24.25M
06-登录后-合并购物车_ev .mp4 54.17M
07-登录后-商品列表_ev .mp4 15.04M
24-登录合并购物车
08-登录后-加入购物车_ev .mp4 30.33M
09-登录后-删除操作_ev .mp4 4.56M
10-登录后-批量删除_ev .mp4 3.09M
11-登录后-选中状态&修改数量_ev .mp4 13.85M
12-登录后-修改规格 (1)_ev .mp4 20.86M
13-登录后-修改规格 (2)_ev .mp4 4.91M
14-下单结算_ev .mp4 41.89M
15-结算-页面布局_ev .mp4 13.47M
16-结算-渲染页面-01-获取数据&渲染结算_ev .mp4 41.43M
17-结算-渲染页面-收货地址默认渲染_ev .mp4 48.65M
25-结算界面
00-昨日回顾&今日内容_ev .mp4 4.65M
01-结算-对话框组件封装-01基本结构_ev .mp4 10.87M
02-结算-对话框组件封装-02双向绑定_ev .mp4 46.79M
03-结算-通知结算组件一个默认地址的ID_ev .mp4 16.51M
04-结算-收货地址-切换-完成切换功能_ev .mp4 64.20M
05-结算-收货地址-添加-准备对话框和表单_ev .mp4 46.50M
06-结算-收货地址-添加-添加收货地址完成_ev .mp4 82.70M
07-结算-收货地址-修改_ev .mp4 50.55M
08-结算-提交订单_ev .mp4 41.02M
26-支付宝支付
09-支付-支付页面-基础布局_ev .mp4 2.65M
10-支付-支付页面-01获取数据展示金额_ev .mp4 19.45M
10-支付-支付页面-02倒计时函数封装_ev .mp4 60.04M
11-支付-支付流程_ev .mp4 6.46M
12-支付-等待支付和跳转支付宝_ev .mp4 41.08M
13-支付-结果展示_ev .mp4 25.66M
27-个人中心页面渲染
00-昨日反馈&今日内容_ev .mp4 6.86M
01-个人中心-布局容器_ev .mp4 25.14M
02-个人中心-基础布局_ev .mp4 27.49M
03-个人中心-渲染页面_ev .mp4 19.30M
04-个人中心-mock数据_ev .mp4 62.64M
05-个人中心-模拟接口_ev .mp4 70.03M
06-个人中心-routerlink的激活类名_ev .mp4 32.02M
06-个人中心-菜单激活-02-嵌套路由写法改造_ev .mp4 48.35M
28-订单管理组件
07-订单管理-tabs组件-01-体验jsx语法_ev .mp4 34.72M
07-订单管理-tabs组件-02-动态渲染结构_ev .mp4 72.15M
07-订单管理-tabs组件-03-实现双向绑定_ev .mp4 53.00M
07-订单管理-tabs组件-04使用组件渲染订单_ev .mp4 16.97M
08-订单管理-基础布局_ev .mp4 5.87M
09-订单管理-列表渲染-01-抽离组件获取数据_ev .mp4 23.50M
09-订单管理-列表渲染-02渲染订单组件_ev .mp4 64.51M
29-订单管理
00-昨日回顾&今日内容_ev .mp4 2.56M
01-订单管理-条件查询_ev .mp4 54.94M
02-订单管理-取消订单_ev .mp4 29.23M
03-订单管理-删除订单_ev .mp4 23.11M
04-订单管理-确认收货_ev .mp4 32.45M
05-订单管理-查看物流_ev .mp4 54.72M
06-订单详情-头部展示_ev .mp4 30.50M
07-订单详情-steps组件_ev .mp4 67.64M
08-订单详情-async的setup组件使用_ev .mp4 36.93M
09-订单详情-商品信息_ev .mp4 16.10M
30-订单详情功能完善
10-订单详情-取消订单_ev .mp4 13.21M
11-订单详情-确认收货_ev .mp4 6.02M
12-再次购买_ev .mp4 30.69M
13-总结-划重点_ev .mp4 12.89M
14-总结-vue3.0踩过的坑_ev .mp4 9.35M
15-Vue3.0关注功能_ev .mp4 31.91M
Vue3.0小兔鲜儿项目资料
笔记
Vue3.0课程笔记 .txt
代码
erabbit-client-pc-124-master
xtx-pc（小兔鲜儿项目代码完整版-作业补充-可以参考老师代码）
项目访问地址
项目访问地址 .txt 0.05kb
Vue3.0小兔鲜儿企业级电商项目开发实战-提升课 .png 1.64M
Vue3.0小兔鲜企业级电商平台项目实战-学习视频教程 .png 3.42M
课程内容：Vue3.0小兔鲜儿前端企业级电商项目实战
02-vite基本使用_ev .mp4