如果你已经会写 Vue2 的页面，也能照着文档拼出组件，但一遇到「一个真实项目该从哪里拆、状态该放哪、组件怎么复用」就卡住，这套小兔鲜电商项目值得花时间看一遍。它不是又一份 API 速查，而是把 Vue3 + ElementPlus + Pinia 放进一个有首页、分类、详情、购物车、结算链路的电商场景里，逼你面对真实的组织问题。
它解决的是「会写组件，但搭不起项目」这个断层
很多人学 Vue3 的路径是：看完组合式 API 语法，写几个计数器，然后就没有然后了。语法会用，但拿到需求文档仍然不知道目录怎么分、请求怎么封装、登录状态存哪里。这门课的定位正好卡在这个断层上——它默认你已经知道 ref 和 reactive 是什么，重点放在工程层面的决策：组件如何按业务拆分、公共逻辑如何抽成组合式函数、跨页面的数据（比如购物车、用户信息）该由谁持有。
换句话说，学完你能独立复现的不是「一个页面」，而是一整套能跑通的电商前台骨架，并且知道每一层为什么这么放。
三个技术点各自承担什么角色
- Vue3 组合式 API：课程用它来组织业务逻辑，而不是炫技。你会看到同一块数据相关的状态、计算、请求如何被收拢到一起，而不是散落在 data、methods、computed 三个选项里。这对后期维护的影响，比语法本身大得多。
- ElementPlus：电商项目里表单、弹窗、分页、骨架屏、消息提示出现频率极高。课程的做法是把它当基础设施用，重点在按需引入、主题变量覆盖、以及和业务组件的边界——哪些直接用现成组件，哪些必须自己包一层。
- Pinia：购物车数量、登录 token、地址信息这类跨页面状态，是 Vue2 时代 Vuex 最容易写乱的地方。Pinia 的写法更接近普通模块，课程会演示如何按业务域拆 store，以及组件里怎么取、怎么改、怎么配合持久化。
学完之后，你能独立做什么
比较现实的预期是：能自己从零搭出一个带登录鉴权、商品列表与详情、购物车增删改、下单流程的前台项目，并且中途不需要反复回去查「状态到底该放组件里还是 store 里」。接口请求的封装、路由守卫拦截未登录、组件按需加载这些环节，课程都会带到。
但要说清楚：它不覆盖服务端、不教你写后端接口，支付和真实订单部分通常也是模拟数据。把它当成「前台工程能力训练」，而不是「完整商业项目交付」，预期才对得上。
适合什么基础，不适合什么人
适合：写过至少一个 Vue 项目、能看懂 ES6 模块和 Promise、想补齐工程化思维的初中级前端。转行者如果已经系统学过 Vue 基础，也可以用它做第一个完整作品。
不太适合：完全没碰过 Vue、连组件和路由概念都陌生的人，直接上这个项目会一直在补前置知识，效率反而低；另外想深入源码原理（响应式实现、编译优化）的人，这门课的重心在应用，不在原理剖析。
使用建议：不要一口气看完再动手。按天推进，每看完一个模块就自己把对应页面写一遍，尤其是状态管理和请求封装这两块，抄一遍和独立写一遍的差距非常大。遇到报错先回看目录结构，多数问题出在引入路径和 store 注册上，而不是语法。
课程目录
├─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 └─Vue3小兔鲜 – 配套资料.zip 适合人群 Vue3初学者 前端开发者 电商项目爱好者 学习收获 掌握Vue3电商项目搭建 熟练使用ElementPlus组件 学习Pinia状态管理 祝您学习愉快！ 学有所成，前程似锦！
