如果你已经能写 Vue 的组件、会用 ref 和 computed,但一遇到「状态该放哪」「类型怎么标」「构建为什么慢」就含糊过去,这门外卖 APP 实战课正好卡在这个缺口上。它不负责教你 HTML 和 JS 基础,而是假设你能看懂单文件组件,然后逼你把一整套工程化链路走通一遍。
先说清楚:它补的是哪几块能力
外卖类应用的复杂度不在页面多,而在数据流和交互细节。商家列表要分页、下拉刷新、上拉加载;商家详情页涉及分类菜单与商品列表的联动滚动;购物车要在多个页面之间共享并实时计算价格。这些需求天然对应三个能力缺口:
- 跨组件状态管理:用 Pinia 定义 store,把购物车、用户定位、商家信息从组件里抽出来,理解 state / getters / actions 的分工,而不是继续靠 props 一层层往下传。
- TypeScript 落地:给接口返回值、store 状态、组件 props 写上类型,知道什么时候该用 interface、什么时候用泛型约束请求函数,让编辑器真正帮你提前报错。
- 构建与请求链路:Vite 的启动与热更新为什么快,代理怎么配才能绕过跨域,axios 拦截器在哪里做统一错误处理和 token 注入。
课程实际推进的顺序
课程从零搭项目开始,先解决环境与工程配置:用 Vite 创建项目、配置请求代理,再用 json-server 搭一套本地 Mock 数据,让前端在没有真实后端的情况下也能跑通。接着引入 axios 并设置请求拦截,把网络层单独抽出来。这一段的意义在于:很多人写项目习惯边写页面边拼请求,最后接口散落各处,改一个域名要翻十几个文件。
进入页面开发后,重点是商家详情页。这里会涉及滚动联动、购物车加减、价格实时计算等典型交互,也是检验 Pinia 和 TS 是否真正用起来的试金石。如果你只是把数据塞进 store 却仍在组件里做大量派生计算,说明 getters 那部分还没吃透。
配套练习建议怎么做
光看不练,这门课的价值会打对折。建议按下面的方式跟:
- 每完成一个页面,先不看下一节,自己把接口请求和状态定义重写一遍,再对照课程调整。
- 把 Mock 数据故意改坏几个字段,观察 TypeScript 是否在编译期就报错。如果没报,说明类型标得太松。
- 给购物车加一个「满减」或「配送费」规则,自己写 getter 实现,这是最直接的 Pinia 练习。
- 用浏览器开发者工具对比 Vite 冷启动与热更新耗时,理解它和传统打包工具的差别在哪。
看完应该能回答的问题
- Pinia 的 store 和组件里的
reactive对象,边界应该怎么划? - Vite 的代理配置解决了什么实际问题,生产环境还需要它吗?
- axios 拦截器里做统一错误处理,和在每个请求里写 try/catch,差别在哪?
- TypeScript 在这个项目里到底拦住了哪几类 bug?如果去掉它,哪些地方会最先出问题?
如果这些问题你现在答不上来,或者答得模棱两可,那这门课值得完整跟一遍。反过来,如果你已经独立做过带状态管理和类型标注的中型项目,它更大的作用可能是帮你查漏,而不是从零建立认知。缺什么补什么,别在已经会的地方反复磨。
Vue3+Pinia+Vite+TypeScript 构建高性能外卖APP实战项目课程
实战外卖APP,掌握Vue3全栈技术
编辑点评
项目实战驱动,系统学习Vue3+Pinia+Vite+TypeScript,打造高性能外卖APP。
⭐ 编辑推荐
从项目搭建到商家详情页开发,全面掌握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开发者
- 前端工程师
- 全栈开发人员
学习收获
祝您学习愉快!
学有所成,前程似锦!
课程目录
第10章-项目部署 | ├──10-1 -购买服务器.mp4 12.60M | ├──10-2 -使用 docker 部署 jenkins.mp4 40.19M | ├──10-3 -使用 jenkins 构建 docker 镜像.mp4 69.21M | └──10-4 -使用 nginx 静态服务器.mp4 24.35M 第1章课程简介 | ├──1-1导学.mp4 65.15M | ├──1-2-课程内容.mp4 20.09M | ├──1-3-课程知识点.mp4 11.00M | └──1-4-项目展示.mp4 123.95M 第2章Typescript基础知识 | ├──2-1什么是typescript.mp4 29.04M | └──2-2安装使用&_基础概念-安装使用.mp4 112.59M 第3章Git使用 | ├──3-1Git介绍与配置.mp4 180.11M | ├──3-2使用create-vue创建vue3项目.mp4 35.98M | ├──3-3使用vite创建vue3项目.mp4 71.97M | ├──3-4Git介绍:如何创建Git项目.mp4 78.42M | ├──3-5Git文件状态:如何提交代码.mp4 114.55M | └──3-6Git协作:如何分支管理.mp4 161.92M 第4章项目搭建及前期准备 | ├──4-10-使用axios请求库,设置请求拦截-01.mp4 19.90M | ├──4-11-使用axios请求库,设置请求拦截-02.mp4 91.89M | ├──4-12-使用post-css实现移动端适配-01.mp4 33.30M | ├──4-13-使用post-css实现移动端适配-02.mp4 79.43M | ├──4-14-配置vite自动按需引入vant组件-01.mp4 20.27M | ├──4-15-配置vite自动按需引入vant组件-02.mp4 60.37M | ├──4-1使用husky管理GitHooks.mp4 26.57M | ├──4-2使用commitlint规范commit信息.mp4 103.63M | ├──4-3配置eslint、prettier规范项目.mp4 85.59M | ├──4-4安装vant-ui和使用Vite按需加载组件.mp4 154.62M | ├──4-5vue-router实现页面路由-01.mp4 114.85M | ├──4-6vue-router实现页面路由-01.mp4 70.65M | ├──4-7使用json-server搭建MockServer-01.mp4 28.49M | ├──4-8使用json-server搭建MockServer-02.mp4 147.50M | └──4-9介绍Vite和使用Vite配置请求代理.mp4 80.53M 第5章首页开发 | ├──5-1-页面头部实现.mp4 216.51M | ├──5-10性能优化:useDounce避免多次请求-01.mp4 82.85M | ├──5-11性能优化:useDounce避免多次请求-02.mp4 75.50M | ├──5-12自定义hooks-useAsync实现请求处理-01.mp4 4.57M | ├──5-13自定义hooks-useAsync实现请求处理-02.mp4 158.14M | ├──5-14基础组件-LoadingView组件实现加载骨架-01.mp4 3.87M | ├──5-15基础组件-LoadingView组件实现加载骨架-02.mp4 85.86M | ├──5-16业务组件-Grid布局实现Transformer金刚位组.mp4 28.28M | ├──5-18业务组件-ScrollBar滚动提示栏组件开发-1.mp4 38.54M | ├──5-19业务组件-ScrollBar滚动提示栏组件开发-2.mp4 225.02M | ├──5-2-基础组件-Search搜索框组件开发-01.mp4 16.24M | ├──5-20业务组件-ScrollBar滚动提示栏组件开发-3.mp4 89.95M | ├──5-21-业务组件-CountDown倒计时组件开发.mp4 173.92M | ├──5-22-自定义hooks-useCountDown实现倒计时逻.mp4 15.06M | ├──5-23-自定义hooks-useCountDown实现倒计时逻.mp4 144.39M | ├──5-24-自定义hooks-useCountDown实现倒计时逻.mp4 105.26M | ├──5-25基础组件-Swipe轮播图组件开发-01.mp4 28.42M | ├──5-26基础组件-Swipe轮播图组件开发-02.mp4 201.97M | ├──5-27基础组件-Swipe轮播图组件开发-03.mp4 190.66M | ├──5-28基础组件-Swipe轮播图组件开发-04.mp4 159.06M | ├──5-29基础组件-Swipe轮播图组件开发-05.mp4 221.84M | ├──5-3-基础组件-Search搜索框组件开发-02.mp4 126.40M | ├──5-31基础组件-Swipe轮播图组件开发-07.mp4 166.97M | ├──5-32业务组件-使用_component_实现标签页动态展示内.mp4 19.73M | ├──5-33业务组件-使用_component_实现标签页动态展示内.mp4 172.53M | ├──5-35基础组件-List组件实现列表滚动加载-02.mp4 149.97M | ├──5-36基础组件-List组件实现列表滚动加载-03.mp4 179.79M | ├──5-37基础组件-List组件实现列表滚动加载-04.mp4 200.81M | ├──5-38业务组件-ShopItem商家列表项组件开发-01.mp4 315.70M | ├──5-39业务组件-ShopItem商家列表项组件开发-02.mp4 7.56M | ├──5-4-基础组件-Search搜索框组件开发-03.mp4 113.40M | ├──5-40-性能优化-使用IntersectionObserver.mp4 38.77M | ├──5-41-性能优化-使用IntersectionObserver.mp4 132.43M | ├──5-5-自定义hooks-useToggle实现搜索页展示切换-.mp4 4.58M | ├──5-6-自定义hooks-useToggle实现搜索页展示切换-.mp4 116.64M | ├──5-7业务组件-SearchView组件开发-01.mp4 6.93M | ├──5-8业务组件-SearchView组件开发-02.mp4 211.94M | └──5-9业务组件-SearchView组件开发-03.mp4 314.82M 第6章我的页面开发 | ├──6-1-我的页面开发.mp4 264.06M | ├──6-2-自定义hooks-useAuth实现登录页面逻辑-01.mp4 8.21M | ├──6-3-自定义hooks-useAuth实现登录页面逻辑-02.mp4 159.68M | ├──6-4-自定义hooks-useAuth实现登录页面逻辑-03.mp4 5.03M | ├──6-5-自定义hooks-useAuth实现登录页面逻辑-04.mp4 39.70M | ├──6-6-自定义hooks-useUserStore使用Pinia.mp4 17.22M | ├──6-7-自定义hooks-useUserStore使用Pinia.mp4 43.17M | └──6-8-自定义hooks-useUserStore使用Pinia.mp4 14.46M 第7章 商家详情页开发 | ├──7-1 业务组件-ShopView 商家详情页.mp4 110.07M | ├──7-10 业务组件-ShopCart 购物车组件开发-2.mp4 264.84M | ├──7-11 -自定义hooks-useTransition 实现加-.mp4 204.68M | ├──7-12 -自定义hooks-useEventBus 使用事件机.mp4 104.33M | ├──7-13 -自定义hooks-useLifeHook 解决非 s.mp4 114.08M | ├──7-14 -自定义hooks-useLockScroll 禁止滚.mp4 93.85M | ├──7-2 业务组件-Header 商家头部组件开发-1-.mp4 204.52M | ├──7-3 业务组件-Header 商家头部组件开发-2.mp4 177.02M | ├──7-4 业务组件-GoodsList 商品列表组件开发.mp4 224.61M | ├──7-5 业务组件-GoodsItem 商品列表项组件开发-1.mp4 91.40M | ├──7-6 业务组件-CartContrl 购物车控件组件开发-2.mp4 150.19M | ├──7-7 自定义hooks-useCartStore 管理购物车数.mp4 122.66M | ├──7-8 自定义hooks-useCartStore 管理购物车数.mp4 112.01M | └──7-9 业务组件-ShopCart 购物车组件开发-1.mp4 230.76M 第8章 商品列表组件开发 | ├──8-1 基础组件-ScrollView 实现原理讲解和开发-1.mp4 108.42M | ├──8-10 -基础类-Scroller 实现滚动逻辑-01.mp4 32.92M | ├──8-11 -基础类-Scroller 实现滚动逻辑-02-1.mp4 194.93M | ├──8-12 -基础类-Scroller 实现滚动逻辑-02-2.mp4 140.49M | ├──8-13 -1 业务组件-GoosList 商品列表组件-01.mp4 172.74M | ├──8-14 -2 业务组件-GoosList 商品列表组件-01.mp4 205.05M | ├──8-15 -3 业务组件-GoosList 商品列表组件-02.mp4 23.42M | ├──8-2 基础组件-ScrollView 实现原理讲解和开发-2.mp4 93.42M | ├──8-3 -基础类-代理模式 MScroll 类和 Options.mp4 169.01M | ├──8-4 -基础类-发布订阅模式 EventEmitter 类和 EventRegister 事件注册类.mp4 77.43M | ├──8-5 -基础类-Transition 类实现元素移动-.mp4 145.80M | ├──8-6 -基础类-ActionsHandler 绑定 touch 事件.mp4 82.65M | ├──8-7 基础类-Behavior 处理坐标方向上的划动逻辑-1.mp4 167.03M | ├──8-8 基础类-Behavior 处理坐标方向上的划动逻辑-2.mp4 190.58M | └──8-9 -基础类-Actions 依赖注入实现管理滚动动作的逻辑.mp4 268.02M 第9章-商品详情页开发 | ├──9-1 -商品详情页实现-02.mp4 5.38M | ├──9-2 -商品详情页实现-01.mp4 361.55M | ├──9-3 -基础组件-NavBar 返回导航组件.mp4 33.65M | └──9-4 -基础组件-NavBar 返回导航组件.mp4 40.78M 资料代码 | ├──ele-h5-master.zip 604.19kb | └──ele-h5-server-master.zip 1.71M






