Vue3+Pinia+Vite+TS 还原高性能外卖APP项目

**《慕课网：Vue3+Pinia+Vite+TS 还原高性能外卖APP项目》**是一套以企业级项目实战为核心的前端开发课程，课程采用 Vue 3、Pinia、Vite、TypeScript 等当前主流前端技术栈，通过完整开发一款高性能外卖 APP，帮助学习者掌握现代前端工程化开发流程和项目实战能力。课程适合具有 HTML、CSS、JavaScript 基础的前端开发者、Vue 学习者以及希望提升项目开发经验的在职工程师。

课程通常从项目初始化开始，介绍 Vite 开发环境搭建、项目目录规划、TypeScript 配置以及代码规范管理，使学习者了解现代前端项目的工程化开发方式。同时，还会讲解 Vite 的构建原理、热更新机制及性能优势，帮助学员掌握快速开发和构建项目的方法。

在 Vue 3 核心部分，课程重点介绍 Composition API（组合式 API）的使用，包括 ref、reactive、computed、watch、生命周期钩子以及自定义 Hook 等内容，并结合组件开发实践，帮助学习者掌握 Vue 3 的响应式开发模式。与此同时，还会介绍组件通信、插槽（Slot）、Provide/Inject、异步组件等高级特性，提高组件的复用性和可维护性。

状态管理方面，课程围绕 Pinia 展开讲解，介绍 Store 的创建、状态共享、Getter、Action、模块拆分以及与 TypeScript 的结合使用，使学员能够构建清晰、易维护的全局状态管理方案。相比传统的 Vuex，Pinia 具有更简洁的 API 和更好的 TypeScript 支持，课程也会分析两者之间的差异及适用场景。

围绕外卖 APP 项目，课程通常实现首页展示、商家列表、商品分类、商品详情、购物车、订单确认、地址管理、用户登录、订单管理等多个业务模块，并结合 Vue Router 实现页面路由管理和权限控制。项目开发过程中，还会介绍接口封装、Axios 网络请求、数据缓存、错误处理、请求拦截以及 Mock 数据模拟等内容，使学习者熟悉前后端分离项目的开发流程。

为了提升应用性能，课程通常会讲解组件懒加载、图片懒加载、代码分割、按需加载、缓存优化、列表虚拟滚动以及移动端适配等优化技术。同时，还会介绍 TypeScript 类型定义、接口约束、泛型应用及代码重构技巧，帮助学员提高代码质量和开发效率。

此外，课程还会涉及 CSS 预处理器（如 SCSS）、移动端响应式布局、Flex 布局、动画效果实现、项目打包部署以及开发规范等工程化内容，使学习者能够掌握企业级项目开发所需的完整技能。

总体来看，《慕课网：Vue3+Pinia+Vite+TS 还原高性能外卖APP项目》是一套以真实项目驱动学习的现代前端开发课程，系统覆盖了 Vue 3、Pinia、Vite、TypeScript、路由管理、接口开发、性能优化及移动端项目实践等核心知识。通过完整开发外卖 APP，学习者不仅能够深入理解现代 Vue 技术栈的应用方式，还能积累企业级项目开发经验，为从事前端开发、移动 Web 开发及全栈开发奠定坚实基础。

课程截图：

课程目录：

慕课网-Vue3+Pinia+Vite+TS 还原高性能外卖APP项目/
│ ├── {4}–第4章项目搭建及前期准备/
│ │ ├── {4}–第4章项目搭建及前期准备文档.zip (1.83 MB)
│ │ ├── [4.9]–4-9介绍Vite和使用Vite配置请求代理.mp4 (121.97 MB)
│ │ ├── [4.8]–4-8使用json-server搭建MockServer-02.mp4 (120.84 MB)
│ │ ├── [4.10]–4-10-使用axios请求库，设置请求拦截-01.mp4 (28.78 MB)
│ │ ├── [4.15]–4-15-配置vite自动按需引入vant组件-02.mp4 (37.72 MB)
│ │ ├── [4.11]–4-11-使用axios请求库，设置请求拦截-02.mp4 (75.46 MB)
│ │ ├── [4.2]–4-2使用commitlint规范commit信息.mp4 (108.81 MB)
│ │ ├── [4.14]–4-14-配置vite自动按需引入vant组件-01.mp4 (27.46 MB)
│ │ ├── [4.7]–4-7使用json-server搭建MockServer-01.mp4 (38.48 MB)
│ │ ├── [4.13]–4-13-使用post-css实现移动端适配-02.mp4 (66.79 MB)
│ │ ├── [4.3]–4-3配置eslint、prettier规范项目.mp4 (103.05 MB)
│ │ ├── [4.4]–4-4安装vant-ui和使用Vite按需加载组件.mp4 (135.55 MB)
│ │ ├── [4.5]–4-5vue-router实现页面路由-01.mp4 (154.62 MB)
│ │ ├── [4.1]–4-1使用husky管理GitHooks.mp4 (51.52 MB)
│ │ ├── [4.6]–4-6vue-router实现页面路由-01.mp4 (54.99 MB)
│ │ └── [4.12]–4-12-使用post-css实现移动端适配-01.mp4 (43.40 MB)
│ ├── {7}–第7章 商家详情页开发/
│ │ ├── {7}–第7章 商家详情页开发必看.zip (1.83 MB)
│ │ ├── 7-5 业务组件-GoodsItem 商品列表项组件开发-1.mp4 (64.81 MB)
│ │ ├── 7-9 业务组件-ShopCart 购物车组件开发-1.mp4 (106.66 MB)
│ │ ├── 7-14 -自定义hooks-useLockScroll 禁止滚.mp4 (93.85 MB)
│ │ ├── 7-7 自定义hooks-useCartStore 管理购物车数据状态-1.mp4 (82.71 MB)
│ │ ├── 7-6 业务组件-CartContrl 购物车控件组件开发-2.mp4 (75.10 MB)
│ │ ├── 7-1 业务组件-ShopView 商家详情页.mp4 (82.50 MB)
│ │ ├── 7-2 业务组件-Header 商家头部组件开发-1.mp4 (116.52 MB)
│ │ ├── 7-11 -自定义hooks-useTransition 实现加入购物车动画效果.mp4 (124.29 MB)
│ │ ├── 7-10 业务组件-ShopCart 购物车组件开发-2.mp4 (109.51 MB)
│ │ ├── 7-4 业务组件-GoodsList 商品列表组件开发.mp4 (138.24 MB)
│ │ ├── 7-3 业务组件-Header 商家头部组件开发-2.mp4 (108.84 MB)
│ │ ├── 7-12 -自定义hooks-useEventBus 使用事件机制实现跨组件通信.mp4 (86.30 MB)
│ │ ├── 7-13 -自定义hooks-useLifeHook 解决非.mp4 (114.08 MB)
│ │ └── 7-8 自定义hooks-useCartStore 管理购物车数据状态-2.mp4 (75.56 MB)
│ ├── {1}–第1章课程简介/
│ │ ├── [1.3]–1-3-课程知识点.mp4 (13.09 MB)
│ │ ├── [1.2]–1-2-课程内容.mp4 (22.59 MB)
│ │ ├── [1.4]–1-4-项目展示.mp4 (74.81 MB)
│ │ └── [1.1]–1-1导学.mp4 (69.24 MB)
│ ├── {3}–第3章Git使用/
│ │ ├── [3.2]–3-2使用create-vue创建vue3项目.mp4 (16.25 MB)
│ │ ├── [3.1]–3-1Git介绍与配置.mp4 (91.72 MB)
│ │ ├── [3.6]–3-6Git协作：如何分支管理.mp4 (181.32 MB)
│ │ ├── [3.3]–3-3使用vite创建vue3项目.mp4 (118.63 MB)
│ │ ├── [3.4]–3-4Git介绍：如何创建Git项目.mp4 (118.07 MB)
│ │ └── [3.5]–3-5Git文件状态：如何提交代码.mp4 (110.93 MB)
│ ├── {2}–第2章Typescript基础知识/
│ │ ├── {2}–第2章Typescript基础知识说明.png (0.48 MB)
│ │ ├── [2.2]–2-2安装使用&基础概念-安装使用.mp4 (97.71 MB)
│ │ └── [2.1]–2-1什么是typescript.mp4 (38.95 MB)
│ ├── {5}–第5章首页开发/
│ │ ├── {5}–第5章首页开发文档.png (0.48 MB)
│ │ ├── [5.35]–5-35基础组件-List组件实现列表滚动加载-02.mp4 (126.47 MB)
│ │ ├── [5.4]–5-4-基础组件-Search搜索框组件开发-03.mp4 (55.93 MB)
│ │ ├── [5.1]–5-1-页面头部实现.mp4 (184.54 MB)
│ │ ├── [5.24]–5-24-自定义hooks-useCountDown实现倒计时逻.mp4 (80.71 MB)
│ │ ├── [5.22]–5-22-自定义hooks-useCountDown实现倒计时逻.mp4 (16.65 MB)
│ │ ├── [5.21]–5-21-业务组件-CountDown倒计时组件开发.mp4 (105.46 MB)
│ │ ├── [5.14]–5-14基础组件-LoadingView组件实现加载骨架-01.mp4 (3.82 MB)
│ │ ├── [5.12]–5-12自定义hooks-useAsync实现请求处理-01.mp4 (4.71 MB)
│ │ ├── [5.40]–5-40-性能优化-使用IntersectionObserver.mp4 (42.95 MB)
│ │ ├── [5.25]–5-25基础组件-Swipe轮播图组件开发-01.mp4 (33.16 MB)
│ │ ├── [5.8]–5-8业务组件-SearchView组件开发-02.mp4 (170.52 MB)
│ │ ├── [5.39]–5-39业务组件-ShopItem商家列表项组件开发-02.mp4 (5.75 MB)
│ │ ├── [5.36]–5-36基础组件-List组件实现列表滚动加载-03.mp4 (122.38 MB)
│ │ ├── [5.18]–5-18业务组件-ScrollBar滚动提示栏组件开发-1.mp4 (35.66 MB)
│ │ ├── [5.16]–5-16业务组件-Grid布局实现Transformer金刚位组.mp4 (32.68 MB)
│ │ ├── [5.3]–5-3-基础组件-Search搜索框组件开发-02.mp4 (101.70 MB)
│ │ ├── [5.10]–5-10性能优化：useDounce避免多次请求-01.mp4 (116.00 MB)
│ │ ├── [5.31]–5-31基础组件-Swipe轮播图组件开发-07.mp4 (122.68 MB)
│ │ ├── [5.26]–5-26基础组件-Swipe轮播图组件开发-02.mp4 (166.01 MB)
│ │ ├── [5.33]–5-33业务组件-使用_component_实现标签页动态展示内.mp4 (98.78 MB)
│ │ ├── [5.7]–5-7业务组件-SearchView组件开发-01.mp4 (7.80 MB)
│ │ ├── [5.19]–5-19业务组件-ScrollBar滚动提示栏组件开发-2.mp4 (178.75 MB)
│ │ ├── [5.9]–5-9业务组件-SearchView组件开发-03.mp4 (175.94 MB)
│ │ ├── [5.41]–5-41-性能优化-使用IntersectionObserver.mp4 (98.50 MB)
│ │ ├── [5.5]–5-5-自定义hooks-useToggle实现搜索页展示切换-.mp4 (5.32 MB)
│ │ ├── [5.20]–5-20业务组件-ScrollBar滚动提示栏组件开发-3.mp4 (49.61 MB)
│ │ ├── [5.13]–5-13自定义hooks-useAsync实现请求处理-02.mp4 (127.88 MB)
│ │ ├── [5.15]–5-15基础组件-LoadingView组件实现加载骨架-02.mp4 (71.48 MB)
│ │ ├── [5.11]–5-11性能优化：useDounce避免多次请求-02.mp4 (62.65 MB)
│ │ ├── [5.28]–5-28基础组件-Swipe轮播图组件开发-04.mp4 (125.97 MB)
│ │ ├── [5.29]–5-29基础组件-Swipe轮播图组件开发-05.mp4 (129.56 MB)
│ │ ├── [5.37]–5-37基础组件-List组件实现列表滚动加载-04.mp4 (126.68 MB)
│ │ ├── [5.6]–5-6-自定义hooks-useToggle实现搜索页展示切换-.mp4 (77.91 MB)
│ │ ├── [5.38]–5-38业务组件-ShopItem商家列表项组件开发-01.mp4 (171.10 MB)
│ │ ├── [5.2]–5-2-基础组件-Search搜索框组件开发-01.mp4 (21.34 MB)
│ │ ├── [5.23]–5-23-自定义hooks-useCountDown实现倒计时逻.mp4 (114.12 MB)
│ │ ├── [5.32]–5-32业务组件-使用_component_实现标签页动态展示内.mp4 (20.46 MB)
│ │ └── [5.27]–5-27基础组件-Swipe轮播图组件开发-03.mp4 (139.66 MB)
│ ├── 第8章 商品列表组件开发/
│ │ ├── 第8章 商品列表组件开发资料.png (0.48 MB)
│ │ ├── 8-13 -1 业务组件-GoosList 商品列表组件-01.mp4 (172.74 MB)
│ │ ├── 8-5 -基础类-Transition 类实现元素移动-.mp4 (145.80 MB)
│ │ ├── 8-7 基础类-Behavior 处理坐标方向上的划动逻辑-1.mp4 (167.03 MB)
│ │ ├── 8-14 -2 业务组件-GoosList 商品列表组件-01.mp4 (205.05 MB)
│ │ ├── 8-6 -基础类-ActionsHandler 绑定 touch 事件.mp4 (82.65 MB)
│ │ ├── 8-10 -基础类-Scroller 实现滚动逻辑-01.mp4 (32.92 MB)
│ │ ├── 8-1 基础组件-ScrollView 实现原理讲解和开发-1.mp4 (108.42 MB)
│ │ ├── 8-8 基础类-Behavior 处理坐标方向上的划动逻辑-2.mp4 (190.58 MB)
│ │ ├── 8-9 -基础类-Actions 依赖注入实现管理滚动动作的逻辑.mp4 (268.02 MB)
│ │ ├── 8-4 -基础类-发布订阅模式 EventEmitter 类和 EventRegister 事件注册类.mp4 (77.43 MB)
│ │ ├── 8-11 -基础类-Scroller 实现滚动逻辑-02-1.mp4 (194.93 MB)
│ │ ├── 8-12 -基础类-Scroller 实现滚动逻辑-02-2.mp4 (140.49 MB)
│ │ ├── 8-2 基础组件-ScrollView 实现原理讲解和开发-2.mp4 (93.42 MB)
│ │ ├── 8-15 -3 业务组件-GoosList 商品列表组件-02.mp4 (23.42 MB)
│ │ └── 8-3 -基础类-代理模式 MScroll 类和 Options.mp4 (169.01 MB)
│ ├── 第9章-商品详情页开发/
│ │ ├── 9-2 -商品详情页实现-01.mp4 (361.55 MB)
│ │ ├── 9-4 -基础组件-NavBar 返回导航组件.mp4 (40.78 MB)
│ │ ├── 9-1 -商品详情页实现-02.mp4 (5.38 MB)
│ │ └── 9-3 -基础组件-NavBar 返回导航组件.mp4 (33.65 MB)
│ ├── {6}–第6章我的页面开发/
│ │ ├── {6}–第6章我的页面开发资料.zip (1.83 MB)
│ │ ├── [6.7]–6-7-自定义hooks-useUserStore使用Pinia.mp4 (38.05 MB)
│ │ ├── [6.3]–6-3-自定义hooks-useAuth实现登录页面逻辑-02.mp4 (122.45 MB)
│ │ ├── [6.6]–6-6-自定义hooks-useUserStore使用Pinia.mp4 (20.61 MB)
│ │ ├── 6-10 -自定义hooks-useLocalStorage 保存用户状态信息-01.mp4 (25.18 MB)
│ │ ├── [6.4]–6-4-自定义hooks-useAuth实现登录页面逻辑-03.mp4 (2.69 MB)
│ │ ├── 6-11 -自定义hooks-useLocalStorage 保存用户状态信息-02.mp4 (144.69 MB)
│ │ ├── 6-9 -自定义hooks-useUserStore 使用 Pinia 实现用户状态管理-04.mp4 (10.38 MB)
│ │ ├── [6.2]–6-2-自定义hooks-useAuth实现登录页面逻辑-01.mp4 (8.95 MB)
│ │ ├── [6.8]–6-8-自定义hooks-useUserStore使用Pinia.mp4 (9.91 MB)
│ │ ├── [6.5]–6-5-自定义hooks-useAuth实现登录页面逻辑-04.mp4 (34.31 MB)
│ │ └── [6.1]–6-1-我的页面开发.mp4 (161.22 MB)
│ ├── 课件/
│ │ ├── 课件.exe (3.25 MB)
│ │ └── 资料代码.exe (2.56 MB)
│ └── 第10章-项目部署/
│ │ ├── 10-1 -购买服务器.mp4 (12.60 MB)
│ │ ├── 10-2 -使用 docker 部署 jenkins.mp4 (40.19 MB)
│ │ ├── 10-3 -使用 jenkins 构建 docker 镜像.mp4 (69.21 MB)
│ │ └── 10-4 -使用 nginx 静态服务器.mp4 (24.35 MB)