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

前端开发

课程简介

这门课的主题很明确：用 Vue3 全家桶把一套外卖 App 从零搭起来。它不靠概念堆砌，而是把技术点塞进一个具体业务里跑通——首页、商家列表、菜单、购物车、订单、地址管理这些外卖场景的典型模块，都会在项目里出现。对已经写过 Vue2 或接触过 Vue3 基础语法、但没完整跟过一个中大型项目的人来说，这类资料的价值在于「结构可抄」：目录怎么分、状态怎么放、请…

已有 11 人浏览发布 2026-08-01 更新 2026-10-07

技术栈组合不是拼盘，而是有依赖关系

Vue3 负责视图与组件拆分，Pinia 接管跨页面共享的状态，Vite 提供开发服务器、热更新和构建配置，TypeScript 则贯穿组件 props、接口返回和 store 定义。四者叠在一起时，真正的难点不是单个 API，而是边界划分：哪些数据该放 Pinia，哪些留在组件本地；接口响应类型定义到什么颗粒度；Vite 的 proxy 代理和 mock 服务器怎么配合，才能让前端在真实后端就绪前独立联调。课程里用 json-server 搭 Mock Server 这一段，就是典型的工程化切口——它决定你后续调试顺不顺。

项目结构决定复用上限

外卖 App 的页面数量不算多，但共享逻辑密集：商家、菜品、购物车、订单状态在多个页面反复出现。如果 store 设计得糙，后期改动会牵一发动全身。这门课在前期准备和项目搭建阶段会把目录组织、路由配置、请求层封装、类型声明文件这些基础工作铺开，后面所有业务模块都建立在这套骨架上。建议学习时不要只跟着敲，而是把「请求封装」「store 模块划分」「组件通信方式」单独抽出来看，判断哪些可以直接搬到自己的项目里。

高性能不是口号，要落到具体手段

标题里的「高性能」需要拆开验证。在前端侧通常涉及：路由懒加载、组件按需引入、图片与长列表处理、避免不必要的响应式开销、请求缓存与合并。外卖场景里，商家列表滚动、菜单分类联动、购物车数量频繁变更，都是容易触发性能问题的点。看课时可以重点记录它在这些位置的处理方式，以及 Vite 构建配置上做了哪些优化，比如拆分 chunk、开启压缩、手动分包。这些配置比单个语法点更有迁移价值。

自学路径建议

先过一遍 Vue3 组合式 API 与 TypeScript 基础类型，确保能看懂 setup 里的类型标注。
从项目搭建章节切入，自己先把 Vite 配置、代理、Mock Server 跑通，再进入业务页面。
每完成一个模块，回看 store 与请求层的改动，整理出可复用的封装模板。
最后对照源码检查类型覆盖、异常处理和边界状态，避免只跑通 happy path。

这份资料的定位是对照实践的参考，不是看完就结束的视频。建议边看边在本地起项目，把业务模块和源码逐段比对，尤其关注配置文件和类型定义这类容易被快进掉的部分。能跑通自己的版本，才算真正吃下这套技术栈。

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

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

编辑点评

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

⭐ 编辑推荐

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

✨ 课程亮点

✦Vue3生态技术深度解析

✦实战项目驱动学习

✦TypeScript应用提升性能

课程目录

{4}--第4章项目搭建及前期准备16 集

{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章商家详情页开发15 集

{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章课程简介3 集

[1.3]--1-3-课程知识点.mp4 [13.1 MB]
[1.2]--1-2-课程内容.mp4 [22.6 MB]
[1.4]--1-4-项目展示.mp4 [74.8 MB]

{3}--第3章Git使用6 集

[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}--第2章Typescript基础知识说明.png [493.5 KB]
[2.2]--2-2安装使用&基础概念-安装使用.mp4 [97.7 MB]

{5}--第5章首页开发39 集

第8章商品列表组件开发16 集

第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章-商品详情页开发4 集

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章我的页面开发12 集

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

课件2 条

课件.exe [3.2 MB]
资料代码.exe [2.6 MB]

第10章-项目部署4 集

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

🎉 祝您学习愉快！