课程定位与学习门槛

这门课的本质，是带你完整复刻一套商业级的移动端外卖 H5 应用。它没有停留在 Vue3 API 的说明书式讲解，而是将 Pinia、TypeScript、Vite 等技术点嵌入到真实的业务场景中。对于只想了解概念的新手来说，这可能略显硬核；但对于有一定 JavaScript 基础、希望跨越「懂语法但写不出项目」鸿沟的开发者，这是极佳的实战跳板。

课程明确强调「全程手敲代码」，这意味着资料包中的源码不是让你直接复制来跑通 demo，而是作为参照标准。建议你具备基础的 ES6+ 语法和 Vue2 使用经验后再入手。若 TypeScript 基础薄弱，建议先补充类型定义相关知识，否则在看状态管理和接口对接时会感到吃力。这门课解决的核心问题是：如何将零散的技术点串联成可维护、高性能的工程化项目。

推荐学习路径与资料用法

资料包里的代码是按模块组织的，这是你最核心的练习资源。建议采用「拆解-复现-优化」的三步学习法。第一步，先通读老师的代码结构，理解组件划分逻辑和目录规范；第二步，关闭视频，尝试独立复现核心功能模块，如首页分类渲染、购物车状态流转；第三步，对照源码找差距，重点记录那些你没有考虑到的边界情况或性能优化细节。

请务必重视 Vite 配置和 Pinia 状态管理这两个章节。很多初学者擅长写 UI 组件，却搞不定跨页面的数据共享和构建优化。这里的学习重点不是背诵配置项，而是理解为什么在这个场景下需要这样配置。同时，课程中涉及的设计模式应用部分，不要跳过，它是提升代码可读性和可维护性的关键。

学完后的独立产出能力

学完这门课，你应该能够独立完成一个中等复杂度的移动端 Web 项目开发。具体表现为：你能搭建起符合企业规范的 Vue3 + TS 工程结构；能熟练运用 Pinia 解决复杂的全局状态管理难题，而非滥用 Vuex 式的写法；能写出类型安全的 TypeScript 代码，减少运行时的潜在错误。

更重要的是，你将掌握前端性能优化的实战技巧。从路由懒加载到组件异步加载，从图片优化到长列表渲染，这些不再是简历上的关键词，而是你已经亲手实现过的能力。这套经验可以直接迁移到电商、资讯、后台管理等各类 H5 场景中，为你后续承接更大型的项目或应对高阶面试打下坚实基础。

课程目录

├── 第1章课程简介/ │ ├── [ 65M] 1-1导学.mp4
 │ ├── [ 20M] 1-2-课程内容.mp4
 │ ├── [ 11M] 1-3-课程知识点.mp4
 │ └── [124M] 1-4-项目展示.mp4
 ├── 第2章Typescript基础知识/ │ ├── [ 29M] 2-1什么是typescript.mp4
 │ └── [113M] 2-2安装使用&amp_基础概念-安装使用.mp4
 ├── 第3章Git使用/ │ ├── [180M] 3-1Git介绍与配置.mp4
 │ ├── [ 36M] 3-2使用create-vue创建vue3项目.mp4
 │ ├── [ 72M] 3-3使用vite创建vue3项目.mp4
 │ ├── [ 78M] 3-4Git介绍：如何创建Git项目.mp4
 │ ├── [115M] 3-5Git文件状态：如何提交代码.mp4
 │ └── [162M] 3-6Git协作：如何分支管理.mp4
 ├── 第4章项目搭建及前期准备/ │ ├── [ 20M] 4-10-使用axios请求库，设置请求拦截-01.mp4
 │ ├── [ 92M] 4-11-使用axios请求库，设置请求拦截-02.mp4
 │ ├── [ 33M] 4-12-使用post-css实现移动端适配-01.mp4
 │ ├── [ 79M] 4-13-使用post-css实现移动端适配-02.mp4
 │ ├── [ 20M] 4-14-配置vite自动按需引入vant组件-01.mp4
 │ ├── [ 60M] 4-15-配置vite自动按需引入vant组件-02.mp4
 │ ├── [ 27M] 4-1使用husky管理GitHooks.mp4
 │ ├── [104M] 4-2使用commitlint规范commit信息.mp4
 │ ├── [ 86M] 4-3配置eslint、prettier规范项目.mp4
 │ ├── [155M] 4-4安装vant-ui和使用Vite按需加载组件.mp4
 │ ├── [115M] 4-5vue-router实现页面路由-01.mp4
 │ ├── [ 71M] 4-6vue-router实现页面路由-01.mp4
 │ ├── [ 28M] 4-7使用json-server搭建MockServer-01.mp4
 │ ├── [147M] 4-8使用json-server搭建MockServer-02.mp4
 │ └── [ 81M] 4-9介绍Vite和使用Vite配置请求代理.mp4
 ├── 第5章首页开发/ │ ├── [ 83M] 5-10性能优化：useDounce避免多次请求-01.mp4
 │ ├── [ 76M] 5-11性能优化：useDounce避免多次请求-02.mp4
 │ ├── [4.6M] 5-12自定义hooks-useAsync实现请求处理-01.mp4
 │ ├── [158M] 5-13自定义hooks-useAsync实现请求处理-02.mp4
 │ ├── [3.9M] 5-14基础组件-LoadingView组件实现加载骨架-01.mp4
 │ ├── [ 86M] 5-15基础组件-LoadingView组件实现加载骨架-02.mp4
 │ ├── [ 28M] 5-16业务组件-Grid布局实现Transformer金刚位组.mp4
 │ ├── [ 39M] 5-18业务组件-ScrollBar滚动提示栏组件开发-1.mp4
 │ ├── [225M] 5-19业务组件-ScrollBar滚动提示栏组件开发-2.mp4
 │ ├── [217M] 5-1-页面头部实现.mp4
 │ ├── [ 90M] 5-20业务组件-ScrollBar滚动提示栏组件开发-3.mp4
 │ ├── [174M] 5-21-业务组件-CountDown倒计时组件开发.mp4
 │ ├── [ 15M] 5-22-自定义hooks-useCountDown实现倒计时逻.mp4
 │ ├── [144M] 5-23-自定义hooks-useCountDown实现倒计时逻.mp4
 │ ├── [105M] 5-24-自定义hooks-useCountDown实现倒计时逻.mp4
 │ ├── [ 28M] 5-25基础组件-Swipe轮播图组件开发-01.mp4
 │ ├── [202M] 5-26基础组件-Swipe轮播图组件开发-02.mp4
 │ ├── [191M] 5-27基础组件-Swipe轮播图组件开发-03.mp4
 │ ├── [159M] 5-28基础组件-Swipe轮播图组件开发-04.mp4
 │ ├── [222M] 5-29基础组件-Swipe轮播图组件开发-05.mp4
 │ ├── [ 16M] 5-2-基础组件-Search搜索框组件开发-01.mp4
 │ ├── [167M] 5-31基础组件-Swipe轮播图组件开发-07.mp4
 │ ├── [ 20M] 5-32业务组件-使用_component_实现标签页动态展示内.mp4
 │ ├── [173M] 5-33业务组件-使用_component_实现标签页动态展示内.mp4
 │ ├── [150M] 5-35基础组件-List组件实现列表滚动加载-02.mp4
 │ ├── [180M] 5-36基础组件-List组件实现列表滚动加载-03.mp4
 │ ├── [201M] 5-37基础组件-List组件实现列表滚动加载-04.mp4
 │ ├── [316M] 5-38业务组件-ShopItem商家列表项组件开发-01.mp4
 │ ├── [7.6M] 5-39业务组件-ShopItem商家列表项组件开发-02.mp4
 │ ├── [126M] 5-3-基础组件-Search搜索框组件开发-02.mp4
 │ ├── [ 39M] 5-40-性能优化-使用IntersectionObserver.mp4
 │ ├── [132M] 5-41-性能优化-使用IntersectionObserver.mp4
 │ ├── [113M] 5-4-基础组件-Search搜索框组件开发-03.mp4
 │ ├── [4.6M] 5-5-自定义hooks-useToggle实现搜索页展示切换-.mp4
 │ ├── [117M] 5-6-自定义hooks-useToggle实现搜索页展示切换-.mp4
 │ ├── [6.9M] 5-7业务组件-SearchView组件开发-01.mp4
 │ ├── [212M] 5-8业务组件-SearchView组件开发-02.mp4
 │ └── [315M] 5-9业务组件-SearchView组件开发-03.mp4
 └── 第6章我的页面开发/ ├── @【更多it资源 www.】 ├── [264M] 6-1-我的页面开发.mp4
 ├── [8.2M] 6-2-自定义hooks-useAuth实现登录页面逻辑-01.mp4
 ├── [160M] 6-3-自定义hooks-useAuth实现登录页面逻辑-02.mp4
 ├── [5.0M] 6-4-自定义hooks-useAuth实现登录页面逻辑-03.mp4
 ├── [ 40M] 6-5-自定义hooks-useAuth实现登录页面逻辑-04.mp4
 ├── [ 17M] 6-6-自定义hooks-useUserStore使用Pinia.mp4
 ├── [ 43M] 6-7-自定义hooks-useUserStore使用Pinia.mp4
 └── [ 14M] 6-8-自定义hooks-useUserStore使用Pinia.mp4
 ├── 第7章 商家详情页开发/ │ ├── [110M] 7-1 业务组件-ShopView 商家详情页.mp4
 │ ├── [205M] 7-2 业务组件-Header 商家头部组件开发-1.mp4
 │ ├── [177M] 7-3 业务组件-Header 商家头部组件开发-2.mp4
 │ ├── [225M] 7-4 业务组件-GoodsList 商品列表组件开发.mp4
 │ ├── [ 91M] 7-5 业务组件-GoodsItem 商品列表项组件开发-1.mp4
 │ ├── [150M] 7-6 业务组件-CartContrl 购物车控件组件开发-2.mp4
 │ ├── [123M] 7-7 自定义hooks-useCartStore 管理购物车数.mp4
 │ ├── [112M] 7-8 自定义hooks-useCartStore 管理购物车数.mp4
 │ ├── [231M] 7-9 业务组件-ShopCart 购物车组件开发-1.mp4
 │ ├── [265M] 7-

10 业务组件-ShopCart 购物车组件开发-2.mp4
 │ ├── [205M] 7-

11 -自定义hooks-useTransition 实现加.mp4
 │ ├── [104M] 7-

12 -自定义hooks-useEventBus 使用事件机.mp4
 │ ├── [114M] 7-

13 -自定义hooks-useLifeHook 解决非 s.mp4
 │ └── [ 94M] 7-

14 -自定义hooks-useLockScroll 禁止滚.mp4
 ├── 第8章 商品列表组件开发/ │ ├── [ 50M] 8-1 基础组件-ScrollView 实现原理讲解和开发-1 │ ├── [ 53M] 8-2 基础组件-ScrollView 实现原理讲解和开发-2 │ ├── [100M] 8-3 -基础类-代理模式 MScroll 类和 Options 配置处理类 │ ├── [ 42M] 8-4 -基础类-发布订阅模式 EventEmitter 类和 EventRegister 事件注册类 │ ├── [ 82M] 8-5 -基础类-Transition 类实现元素移动- │ ├── [ 50M] 8-6 -基础类-ActionsHandler 绑定 touch 事件 │ ├── [ 99M] 8-7 基础类-Behavior 处理坐标方向上的划动逻辑-1 │ ├── [ 90M] 8-8 基础类-Behavior 处理坐标方向上的划动逻辑-2 │ ├── [144M] 8-9 -基础类-Actions 依赖注入实现管理滚动动作的逻辑 │ ├── [ 20M] 8-

10 -基础类-Scroller 实现滚动逻辑-

01 │ ├── [106M] 8-

11 -基础类-Scroller 实现滚动逻辑-02-1 │ ├── [ 59M] 8-

12 -基础类-Scroller 实现滚动逻辑-02-2 │ ├── [ 67M] 8-13 -1 业务组件-GoosList 商品列表组件-

01 │ ├── [ 72M] 8-14 -2 业务组件-GoosList 商品列表组件-

01 │ └── [9.9M] 8-15 -3 业务组件-GoosList 商品列表组件-

02 ├── 第9章 商品详情页开发/ │ ├── [1.9M] 9-1 -商品详情页实现-

02 │ ├── [175M] 9-2 -商品详情页实现-

01 │ ├── [ 18M] 9-3 -基础组件-NavBar 返回导航组件 │ └── [ 22M] 9-4 -基础组件-NavBar 返回导航组件 ├── 第10章 项目部署/ │ ├── [6.9M] 10-1 -购买服务器 │ ├── [ 24M] 10-2 -使用 docker 部署 jenkins │ ├── [ 37M] 10-3 -使用 jenkins 构建 docker 镜像 │ └── [ 11M] 10-4 -使用 nginx 静态服务器 └── 资料代码/