如果你已经会写 Vue 的基础语法，但一遇到真实项目就不知道该从哪里下手，这门课值得看。它不讲零散的知识点，而是围绕一个完整的外卖 App，把 Vue3、Pinia、Vite、TypeScript 四样东西揉进同一个开发流程里。学完你手上会有一个能跑起来的项目，而不是一堆记了又忘的 API。

它对应的工作场景是什么

外卖类 App 是前端面试和实际业务里都很常见的一类需求：首页有商家列表和分类筛选，点进商家是详情页和菜单，还要处理购物车、状态同步、接口请求。这些场景几乎覆盖了中后台之外的大部分日常开发动作。课程从项目搭建、请求代理配置、Mock 数据服务起步，一路做到商家详情页，链条是完整的。你在工作中遇到的「接口还没好怎么先开发」「多个页面共享购物车状态怎么管」这类问题，它都会给出一套具体做法。

学完能独立做什么

  • 用 Vite 从零搭一个项目骨架，并配置开发环境的请求代理，解决本地联调的跨域问题。
  • 用 json-server 之类的方式自建 Mock 接口，在后端没就绪时先把页面跑通。
  • 用 axios 封装请求层，统一处理拦截、错误和基础配置，而不是在每个组件里散着写请求。
  • 用 Pinia 管理跨页面共享的状态，比如购物车、用户信息，理清什么该放进 store、什么该留在组件里。
  • 用 TypeScript 给接口数据和组件 props 标注类型，让改动代码时能早点发现错误。

换句话说，你能独立走完「搭架子—接数据—管状态—做页面」这条主线，而不是只会照着视频敲。

资料适合什么基础

这门课不是给完全没碰过前端的人准备的。你需要先能看懂 Vue 的模板语法、组件、以及基本的 ES6 写法，否则跟起来会吃力。TypeScript 部分不要求你有多深的理解，但至少要知道类型注解长什么样。如果你之前只用过 Vue2 的 Options API，也不用担心，课程是按 Vue3 的写法推进的，正好借这个项目把组合式 API 用熟。

怎么用这份资料更划算

建议别把它当剧集顺着看。正确的方式是先跟着把项目环境和 Mock 服务跑起来，确保自己能复现一遍搭建过程；然后进入页面开发时，每看完一小节就自己动手写一遍，遇到卡壳再回头看。TypeScript 和 Pinia 的部分不要跳，这两块恰恰是新手最容易在真实项目里翻车的地方。另外，代理配置、请求封装这几节信息密度高，值得反复看几遍，它们决定的是你以后能不能独立起项目。

整体而言，这门课的价值在于把它当成一次完整的项目演练：不是为了收集技术名词，而是为了让你在下次接到类似需求时，知道第一步该做什么、状态该放哪里、接口该怎么接。如果你正处在「会语法但没做过完整项目」的阶段，它值得投入时间；如果你已经独立做过两三个 Vue 项目，其中不少内容你可能会觉得偏基础。

课程目录

📁 {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全栈技术 提升项目实战能力 祝您学习愉快！ 学有所成，前程似锦！ 课程目录 第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安装使用&amp_基础概念-安装使用.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