前端圈子里的实战课很多，但能把 Vue3 生态串成一条完整项目线的不算多。这门课外表上写的是「外卖 APP」，实际做的事是带你用 Vue3 + Pinia + Vite + TypeScript 把一套带 Mock 数据的中型单页应用从零搭到能跑。要不要花时间，取决于你现在卡在哪一步。
它解决的是什么工作场景
如果你已经会写 Vue2，或者跟着文档写过几个 Vue3 的 demo，但一到真实项目就不知道状态该怎么分层、请求代理怎么配、类型怎么补，这门课对应的是这个阶段。外卖这个选题不算新鲜，好处是业务足够典型：首页商家列表、分类筛选、购物车增减、订单确认，几乎每个 to B 或 to C 的后台、商城类项目都能对上号。
比较实用的一点是它没有一上来就假设你有后端。课程用 json-server 起本地 Mock 服务，再讲 Vite 的请求代理配置。这意味着你不需要等接口、也不需要自己写一套假数据，改改就能加自己的字段。对于转行者或在校生来说，这是能放进作品集、并且面试时讲得清楚的一个完整项目。
学完能独立做什么
按课程推进的节奏，最后你应该能独立完成这么几件事：用 Vite 初始化并组织一个 Vue3 项目的目录结构；用 TypeScript 给接口返回、组件 props、Store 状态写类型，而不是全程 any；用 Pinia 把购物车这类跨组件状态抽出来管理，而不是靠 props 一层层传；配置开发环境代理解决跨域；以及把项目打包上线前的基本处理。
这里要泼一点冷水：它教的是「怎么组织一个 Vue3 项目」，不是「怎么写出高性能的外卖 APP」。标题里的「高性能」更多指工程配置层面的优化思路，别指望学完就能处理百万级并发的渲染问题。把它当成一次规范的项目骨架训练，期待值会更准。
资料适合什么基础
- 适合：写过 Vue2 或 Vue3 基础语法、懂 ES6、对 npm 和命令行不陌生的人。
- 勉强适合：只学过 HTML/CSS/JS、没碰过框架的人，前期会吃力，建议先补 Vue3 基础再来。
- 不适合：完全零基础，或者已经做过多个 Vue3 项目、想深入源码和性能调优的人。后者会觉得节奏偏慢。
- TypeScript 部分：课程是边用边讲，不是系统讲 TS。如果你完全没接触过类型，建议先花两小时过一遍基础语法。
资料怎么用更划算
这类实战课最忌讳的是「看一遍视频就过」。建议的做法是：先看一章，关掉视频自己照着敲一遍，卡住了再回去看。项目搭建和 Mock 那部分可以跟着走，但 Pinia 和 TypeScript 的部分一定要自己动手改，比如给购物车加一个优惠券状态、给接口加一个可选字段，看类型报错怎么解。报错解不出来的过程，才是真正长本事的地方。
配套的文档包适合当速查用，不用从头读到尾。遇到配置项记不清的时候翻一翻，比反复拖进度条快。如果时间有限，优先保证项目能完整跑起来，再回头补细节，别在环境配置上耗太久。
一句话判断
如果你缺一个结构规范、技术栈跟得上当前招聘要求的 Vue3 项目练手，这门课值得投入。如果你已经有成熟项目经验，只看目录挑几个薄弱章节即可，不必从头跟到尾。
课程目录
📁 {4}--第4章项目搭建及前期准备 {4}--第4章项目搭建及前期准备文档.zip
[1.8 MB] [4.9]--4-9介绍Vite和使用Vite配置请求代理.mp4
[122.0 MB] [4.8]--4-8使用json-server搭建MockServer-02.mp4
[120.8 MB] [4.10]--4-10-使用axios请求库，设置请求拦截-01.mp4
[28.8 MB] [4.15]--4-15-配置vite自动按需引入vant组件-02.mp4
[37.7 MB] [4.11]--4-11-使用axios请求库，设置请求拦截-02.mp4
[75.5 MB] [4.2]--4-2使用commitlint规范commit信息.mp4
[108.8 MB] [4.14]--4-14-配置vite自动按需引入vant组件-01.mp4
[27.5 MB] [4.7]--4-7使用json-server搭建MockServer-01.mp4
[38.5 MB] [4.13]--4-13-使用post-css实现移动端适配-02.mp4
[66.8 MB] [4.3]--4-3配置eslint、prettier规范项目.mp4
[103.1 MB] [4.4]--4-4安装vant-ui和使用Vite按需加载组件.mp4
[135.6 MB] [4.5]--4-5vue-router实现页面路由-01.mp4
[154.6 MB] [4.1]--4-1使用husky管理GitHooks.mp4
[51.5 MB] [4.6]--4-6vue-router实现页面路由-01.mp4
[55.0 MB] [4.12]--4-12-使用post-css实现移动端适配-01.mp4
[43.4 MB] 📁 {7}--第7章 商家详情页开发 {7}--第7章 商家详情页开发必看.zip
[1.8 MB] 7-5 业务组件-GoodsItem 商品列表项组件开发-1.mp4
[64.8 MB] 7-9 业务组件-ShopCart 购物车组件开发-1.mp4
[106.7 MB] 7-
14 -自定义hooks-useLockScroll 禁止滚.mp4
[93.8 MB] 7-7 自定义hooks-useCartStore 管理购物车数据状态-1.mp4
[82.7 MB] 7-6 业务组件-CartContrl 购物车控件组件开发-2.mp4
[75.1 MB] 7-1 业务组件-ShopView 商家详情页.mp4
[82.5 MB] 7-2 业务组件-Header 商家头部组件开发-1.mp4
[116.5 MB] 7-
11 -自定义hooks-useTransition 实现加入购物车动画效果.mp4
[124.3 MB] 7-
10 业务组件-ShopCart 购物车组件开发-2.mp4
[109.5 MB] 7-4 业务组件-GoodsList 商品列表组件开发.mp4
[138.2 MB] 7-3 业务组件-Header 商家头部组件开发-2.mp4
[108.8 MB] 7-
12 -自定义hooks-useEventBus 使用事件机制实现跨组件通信.mp4
[86.3 MB] 7-
13 -自定义hooks-useLifeHook 解决非.mp4
[114.1 MB] 7-8 自定义hooks-useCartStore 管理购物车数据状态-2.mp4
[75.6 MB] 📁 {1}--第1章课程简介 [1.3]--1-3-课程知识点.mp4
[13.1 MB] [1.2]--1-2-课程内容.mp4
[22.6 MB] [1.4]--1-4-项目展示.mp4
[74.8 MB] [1.1]--1-1导学.mp4
[69.2 MB] 📁 {3}--第3章Git使用 [3.2]--3-2使用create-vue创建vue3项目.mp4
[16.2 MB] [3.1]--3-1Git介绍与配置.mp4
[91.7 MB] [3.6]--3-6Git协作：如何分支管理.mp4
[181.3 MB] [3.3]--3-3使用vite创建vue3项目.mp4
[118.6 MB] [3.4]--3-4Git介绍：如何创建Git项目.mp4
[118.1 MB] [3.5]--3-5Git文件状态：如何提交代码.mp4
[110.9 MB] 📁 {2}--第2章Typescript基础知识 {2}--第2章Typescript基础知识说明.png [493.5 KB] [2.2]--2-2安装使用&基础概念-安装使用.mp4
[97.7 MB] [2.1]--2-1什么是typescript.mp4
[39.0 MB] 📁 {5}--第5章首页开发 {5}--第5章首页开发文档.png [493.5 KB] [5.35]--5-35基础组件-List组件实现列表滚动加载-02.mp4
[126.5 MB] [5.4]--5-4-基础组件-Search搜索框组件开发-03.mp4
[55.9 MB] [5.1]--5-1-页面头部实现.mp4
[184.5 MB] [5.24]--5-24-自定义hooks-useCountDown实现倒计时逻.mp4
[80.7 MB] [5.22]--5-22-自定义hooks-useCountDown实现倒计时逻.mp4
[16.7 MB] [5.21]--5-21-业务组件-CountDown倒计时组件开发.mp4
[105.5 MB] [5.14]--5-14基础组件-LoadingView组件实现加载骨架-01.mp4
[3.8 MB] [5.12]--5-12自定义hooks-useAsync实现请求处理-01.mp4
[4.7 MB] [5.40]--5-40-性能优化-使用IntersectionObserver.mp4
[43.0 MB] [5.25]--5-25基础组件-Swipe轮播图组件开发-01.mp4
[33.2 MB] [5.8]--5-8业务组件-SearchView组件开发-02.mp4
[170.5 MB] [5.39]--5-39业务组件-ShopItem商家列表项组件开发-02.mp4
[5.8 MB] [5.36]--5-36基础组件-List组件实现列表滚动加载-03.mp4
[122.4 MB] [5.18]--5-18业务组件-ScrollBar滚动提示栏组件开发-1.mp4
[35.7 MB] [5.16]--5-16业务组件-Grid布局实现Transformer金刚位组.mp4
[32.7 MB] [5.3]--5-3-基础组件-Search搜索框组件开发-02.mp4
[101.7 MB] [5.10]--5-10性能优化：useDounce避免多次请求-01.mp4
[116.0 MB] [5.31]--5-31基础组件-Swipe轮播图组件开发-07.mp4
[122.7 MB] [5.26]--5-26基础组件-Swipe轮播图组件开发-02.mp4
[166.0 MB] [5.33]--5-33业务组件-使用_component_实现标签页动态展示内.mp4
[98.8 MB] [5.7]--5-7业务组件-SearchView组件开发-01.mp4
[7.8 MB] [5.19]--5-19业务组件-ScrollBar滚动提示栏组件开发-2.mp4
[178.8 MB] [5.9]--5-9业务组件-SearchView组件开发-03.mp4
[175.9 MB] [5.41]--5-41-性能优化-使用IntersectionObserver.mp4
[98.5 MB] [5.5]--5-5-自定义hooks-useToggle实现搜索页展示切换-.mp4
[5.3 MB] [5.20]--5-20业务组件-ScrollBar滚动提示栏组件开发-3.mp4
[49.6 MB] [5.13]--5-13自定义hooks-useAsync实现请求处理-02.mp4
[127.9 MB] [5.15]--5-15基础组件-LoadingView组件实现加载骨架-02.mp4
[71.5 MB] [5.11]--5-11性能优化：useDounce避免多次请求-02.mp4
[62.6 MB] [5.28]--5-28基础组件-Swipe轮播图组件开发-04.mp4
[126.0 MB] [5.29]--5-29基础组件-Swipe轮播图组件开发-05.mp4
[129.6 MB] [5.37]--5-37基础组件-List组件实现列表滚动加载-04.mp4
[126.7 MB] [5.6]--5-6-自定义hooks-useToggle实现搜索页展示切换-.mp4
[77.9 MB] [5.38]--5-38业务组件-ShopItem商家列表项组件开发-01.mp4
[171.1 MB] [5.2]--5-2-基础组件-Search搜索框组件开发-01.mp4
[21.3 MB] [5.23]--5-23-自定义hooks-useCountDown实现倒计时逻.mp4
[114.1 MB] [5.32]--5-32业务组件-使用_component_实现标签页动态展示内.mp4
[20.5 MB] [5.27]--5-27基础组件-Swipe轮播图组件开发-03.mp4
[139.7 MB] 📁 第8章 商品列表组件开发 第8章 商品列表组件开发资料.png [493.5 KB] 8-13 -1 业务组件-GoosList 商品列表组件-01.mp4
[172.7 MB] 8-5 -基础类-Transition 类实现元素移动-.mp4
[145.8 MB] 8-7 基础类-Behavior 处理坐标方向上的划动逻辑-1.mp4
[167.0 MB] 8-14 -2 业务组件-GoosList 商品列表组件-01.mp4
[205.1 MB] 8-6 -基础类-ActionsHandler 绑定 touch 事件.mp4
[82.7 MB] 8-
10 -基础类-Scroller 实现滚动逻辑-01.mp4
[32.9 MB] 8-1 基础组件-ScrollView 实现原理讲解和开发-1.mp4
[108.4 MB] 8-8 基础类-Behavior 处理坐标方向上的划动逻辑-2.mp4
[190.6 MB] 8-9 -基础类-Actions 依赖注入实现管理滚动动作的逻辑.mp4
[268.0 MB] 8-4 -基础类-发布订阅模式 EventEmitter 类和 EventRegister 事件注册类.mp4
[77.4 MB] 8-
11 -基础类-Scroller 实现滚动逻辑-02-1.mp4
[194.9 MB] 8-
12 -基础类-Scroller 实现滚动逻辑-02-2.mp4
[140.5 MB] 8-2 基础组件-ScrollView 实现原理讲解和开发-2.mp4
[93.4 MB] 8-15 -3 业务组件-GoosList 商品列表组件-02.mp4
[23.4 MB] 8-3 -基础类-代理模式 MScroll 类和 Options.mp4
[169.0 MB] 📁 第9章-商品详情页开发 9-2 -商品详情页实现-01.mp4
[361.5 MB] 9-4 -基础组件-NavBar 返回导航组件.mp4
[40.8 MB] 9-1 -商品详情页实现-02.mp4
[5.4 MB] 9-3 -基础组件-NavBar 返回导航组件.mp4
[33.7 MB] 📁 {6}--第6章我的页面开发 {6}--第6章我的页面开发资料.zip
[1.8 MB] [6.7]--6-7-自定义hooks-useUserStore使用Pinia.mp4
[38.0 MB] [6.3]--6-3-自定义hooks-useAuth实现登录页面逻辑-02.mp4
[122.4 MB] [6.6]--6-6-自定义hooks-useUserStore使用Pinia.mp4
[20.6 MB] 6-10 -自定义hooks-useLocalStorage 保存用户状态信息-01.mp4
[25.2 MB] [6.4]--6-4-自定义hooks-useAuth实现登录页面逻辑-03.mp4
[2.7 MB] 6-11 -自定义hooks-useLocalStorage 保存用户状态信息-02.mp4
[144.7 MB] 6-9 -自定义hooks-useUserStore 使用 Pinia 实现用户状态管理-04.mp4
[10.4 MB] [6.2]--6-2-自定义hooks-useAuth实现登录页面逻辑-01.mp4
[9.0 MB] [6.8]--6-8-自定义hooks-useUserStore使用Pinia.mp4
[9.9 MB] [6.5]--6-5-自定义hooks-useAuth实现登录页面逻辑-04.mp4
[34.3 MB] [6.1]--6-1-我的页面开发.mp4
[161.2 MB] 📁 课件 课件.exe [3.2 MB] 资料代码.exe [2.6 MB] 📁 第10章-项目部署 10-1 -购买服务器.mp4
[12.6 MB] 10-2 -使用 docker 部署 jenkins.mp4
[40.2 MB] 10-3 -使用 jenkins 构建 docker 镜像.mp4
[69.2 MB] 10-4 -使用 nginx 静态服务器.mp4
[24.4 MB] 适合人群 Vue3开发者 前端工程师 对高性能APP开发感兴趣者 学习收获 掌握Vue3核心特性 精通Pinia状态管理 使用Vite提升开发效率 构建高性能外卖APP 祝您学习愉快！ 学有所成，前程似锦！
