外卖 App 看起来是练手项目里的老面孔，但把它和 Vue3 + Pinia + Vite + TypeScript 绑在一起做，考的东西就变了：你不再只是拼页面，而是要处理一套真实项目里绕不开的工程问题——状态该放哪、请求怎么代理、类型怎么收口、构建为什么慢。

如果你写过 Vue2 或者用 Vue3 写过几个 demo，但一遇到「多人协作的目录结构」「接口返回的数据怎么定义」「改一个字段要翻五个文件」就发怵，这门课的价值才真正体现出来。它补的不是语法课，是工程习惯的缺口。

先说清楚：这门课不适合谁

完全没碰过 Vue 的人，别从这开始。课程默认你至少知道组件怎么写、props 怎么传、v-if 和 v-for 的区别。它也不会手把手教你 HTML 和 CSS 布局，外卖 App 的样式部分基本是顺带带过，重点在数据流和工程配置上。

反过来说，如果你已经能独立写页面，但每次做新项目都要重新纠结「Pinia 的 store 怎么拆」「TypeScript 的 interface 写在哪一层」「Vite 的代理为什么没生效」，那这门课正好对症。它把这些问题放在一个连续的项目里解决，而不是拆成零散的知识点。

四个技术点各自要解决什么问题

  • Vue3 组合式 API：不是让你把 setup 写成另一种 options，而是练习逻辑复用——同一段购物车逻辑怎么在不同组件里共享。
  • Pinia：外卖 App 里有购物车、地址、订单状态，这些跨页面共享的数据如果还用 props 层层传，代码会失控。课程要解决的是 store 的边界怎么划、什么时候不该放进 store。
  • Vite：从配置请求代理、Mock Server 到构建优化，这一块是很多人的盲区。本地开发接口跨域怎么绕、打包体积怎么降，都是实打实要动手调的问题。
  • TypeScript：重点不是把 any 换成 string，而是接口类型怎么定义、组件 props 怎么约束、重构时类型报错能不能帮你提前发现问题。

配套练习该怎么做

这门课的目录里有大量分步骤的实操环节，比如搭建 Mock Server、配置代理这类。建议不要只看视频，跟着敲一遍之后，做两件事：一是把接口地址换成自己 mock 的一套数据，看类型定义要不要跟着改；二是故意把某个 store 里的状态删掉，看哪些组件会报错，借此理清数据依赖。

另外，外卖 App 的购物车逻辑值得单独拎出来重写一遍——用你自己的工作习惯组织 store，再和课程里的写法对比。这种「先自己写、再对照」的练法，比按顺序跟做更能暴露问题。

看完应该能回答这几个问题

  • 一个中等规模项目里，Pinia 的 store 应该按什么维度拆分？页面级状态和全局状态的分界线在哪？
  • Vite 的代理配置为什么有时候改了不生效？Mock 数据和真实接口切换时要注意什么？
  • TypeScript 在外卖这类表单和列表较多的项目里，能提前拦住哪几类错误？
  • Vue3 的组合式函数怎么抽，才不至于让一个文件变成几百行的「万能工具」？

如果这些问题你现在答不上来，或者答得含糊，那这门课值得花时间。答得上来的话，可以直接跳到项目搭建和构建配置那几段，挑自己薄弱的部分看，不必从头到尾走一遍。

慕课网Vue3+Pinia+Vite+TypeScript打造高性能外卖APP实战

Vue3+Pinia+Vite+TypeScript实战打造高性能外卖APP

编辑点评

实战导向，全面覆盖Vue3生态技术，适合有一定基础的前端开发者。

⭐ 编辑推荐

跟随实战项目，深入学习Vue3、Pinia、Vite和TypeScript，构建高性能外卖APP。

课程亮点

• Vue3生态技术深度解析
• 实战项目驱动学习
• TypeScript应用提升性能

课程目录

📁 {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

祝您学习愉快！

学有所成，前程似锦！