Vue3+Pinia+Vite+TS 还原高性能外卖APP项目|已补充课件|无秘更新中第8章

课程简介：

• Vue3 带来的改变，除了其自身新特性，还有相应的技术栈变化——比如 Pinia 将逐渐替代 Vuex 。本课程将带领大家使用 Vue3.2 + Pinia+ Vite + TS 高仿饿了么 Web App，帮助大家掌握 Vue3“全家桶”技术栈的同时，还掌握前端性能优化的常用方法和巧用设计模式应对复杂应用场景的能力。
• 
• 目录：

  • 第1章 课程简介

    • 视频：1-1 导学(08:33)
    • 视频：1-2 -课程内容(04:57)
    • 视频：1-3 -课程知识点(02:38)
    • 视频：1-4 -项目展示(12:33)

    第2章 Typescript 基础知识

    • 视频：2-1 什么是 typescript(07:24)
    • 视频：2-2 安装使用&基础概念-安装使用(15:38)

    第3章 Git 使用

    • 视频：3-1 Git 介绍与配置(15:45)
    • 视频：3-2 使用 create-vue 创建 vue3 项目(03:16)
    • 视频：3-3 使用 vite 创建 vue3 项目(09:59)
    • 视频：3-4 Git 介绍：如何创建 Git 项目(07:21)
    • 视频：3-5 Git 文件状态：如何提交代码(08:01)
    • 视频：3-6 Git 协作：如何分支管理(13:30)

    第4章 项目搭建及前期准备

    • 视频：4-1 使用 husky 管理 Git Hooks(03:39)
    • 视频：4-2 使用 commitlint 规范 commit 信息(07:58)
    • 视频：4-3 配置 eslint、prettier 规范项目(11:45)
    • 视频：4-4 安装 vant-ui 和使用 Vite 按需加载组件(21:09)
    • 视频：4-5 vue-router 实现页面路由-01(15:54)
    • 视频：4-6 vue-router 实现页面路由-01(09:33)
    • 视频：4-7 使用 json-server 搭建 Mock Server-01(07:53)
    • 视频：4-8 使用 json-server 搭建 Mock Server-02(20:40)
    • 视频：4-9 介绍 Vite 和使用 Vite 配置请求代理(19:12)
    • 视频：4-10 -使用 axios 请求库，设置请求拦截-01(06:47)
    • 视频：4-11 -使用 axios 请求库，设置请求拦截-02(12:48)
    • 视频：4-12 -使用 post-css 实现移动端适配-01(10:22)
    • 视频：4-13 -使用 post-css 实现移动端适配-02(10:59)
    • 视频：4-14 -配置 vite 自动按需引入 vant 组件-01(06:13)
    • 视频：4-15 -配置 vite 自动按需引入 vant 组件-02(06:32)

    第5章 首页开发

    • 视频：5-1 -页面头部实现(29:25)
    • 视频：5-2 -基础组件-Search 搜索框组件开发-01(04:48)
    • 视频：5-3 -基础组件-Search 搜索框组件开发-02(16:30)
    • 视频：5-4 -基础组件-Search 搜索框组件开发-03(10:20)
    • 视频：5-5 -自定义hooks-useToggle实现搜索页展示切换-01(01:20)
    • 视频：5-6 -自定义hooks-useToggle实现搜索页展示切换-02(14:39)
    • 视频：5-7 业务组件-SearchView组件开发-01(02:00)
    • 视频：5-8 业务组件-SearchView组件开发-02(27:48)
    • 视频：5-9 业务组件-SearchView组件开发-03(29:58)
    • 视频：5-10 性能优化：useDounce避免多次请求-01(10:33)
    • 视频：5-11 性能优化：useDounce避免多次请求-02(10:28)
    • 视频：5-12 自定义hooks-useAsync 实现请求处理-01(01:26)
    • 视频：5-13 自定义hooks-useAsync 实现请求处理-02(20:43)
    • 视频：5-14 基础组件-LoadingView 组件实现加载骨架-01(01:37)
    • 视频：5-15 基础组件-LoadingView 组件实现加载骨架-02(11:01)
    • 视频：5-16 业务组件-Grid 布局实现 Transformer 金刚位组件-01(08:48)
    • 视频：5-17 业务组件-Grid 布局实现 Transformer 金刚位组件-02(10:44)
    • 视频：5-18 业务组件-ScrollBar 滚动提示栏组件开发-1(06:30)
    • 视频：5-19 业务组件-ScrollBar 滚动提示栏组件开发-2(30:23)
    • 视频：5-20 业务组件-ScrollBar 滚动提示栏组件开发-3(08:44)
    • 视频：5-21 -业务组件-CountDown 倒计时组件开发(17:44)
    • 视频：5-22 -自定义hooks-useCountDown 实现倒计时逻辑-01(05:10)
    • 视频：5-23 -自定义hooks-useCountDown 实现倒计时逻辑-02(19:31)
    • 视频：5-24 -自定义hooks-useCountDown 实现倒计时逻辑-03(13:17)
    • 视频：5-25 基础组件-Swipe 轮播图组件开发-01(09:34)
    • 视频：5-26 基础组件-Swipe 轮播图组件开发-02(26:59)
    • 视频：5-27 基础组件-Swipe 轮播图组件开发-03(23:15)
    • 视频：5-28 基础组件-Swipe 轮播图组件开发-04(22:03)
    • 视频：5-29 基础组件-Swipe 轮播图组件开发-05(22:13)
    • 视频：5-30 基础组件-Swipe 轮播图组件开发-06(25:18)
    • 视频：5-31 基础组件-Swipe 轮播图组件开发-07(21:00)
    • 视频：5-32 业务组件-使用 _component_ 实现标签页动态展示内容-01(03:45)
    • 视频：5-33 业务组件-使用 _component_ 实现标签页动态展示内容-02(17:09)
    • 视频：5-34 基础组件-List 组件实现列表滚动加载-01(08:41)
    • 视频：5-35 基础组件-List 组件实现列表滚动加载-02(20:29)
    • 视频：5-36 基础组件-List 组件实现列表滚动加载-03(21:19)
    • 视频：5-37 基础组件-List 组件实现列表滚动加载-04(22:00)
    • 视频：5-38 业务组件-ShopItem 商家列表项组件开发-01(28:32)
    • 视频：5-39 业务组件-ShopItem 商家列表项组件开发-02(00:50)
    • 视频：5-40 -性能优化-使用 IntersectionObserver 实现图片懒加载 directive-01(09:16)
    • 视频：5-41 -性能优化-使用 IntersectionObserver 实现图片懒加载 directive-02(14:19)

    第6章 我的页面开发 

    • 视频：6-1 -我的页面开发 (27:44)
    • 视频：6-2 -自定义hooks-useAuth 实现登录页面逻辑-01 (02:08)
    • 视频：6-3 -自定义hooks-useAuth 实现登录页面逻辑-02 (20:51)
    • 视频：6-4 -自定义hooks-useAuth 实现登录页面逻辑-03 (00:27)
    • 视频：6-5 -自定义hooks-useAuth 实现登录页面逻辑-04 (05:18)
    • 视频：6-6 -自定义hooks-useUserStore 使用 Pinia 实现用户状态管理-01 (05:07)
    • 视频：6-7 -自定义hooks-useUserStore 使用 Pinia 实现用户状态管理-02 (05:47)
    • 视频：6-8 -自定义hooks-useUserStore 使用 Pinia 实现用户状态管理-03 (01:40)
    • 视频：6-9 -自定义hooks-useUserStore 使用 Pinia 实现用户状态管理-04 (01:52)

    • 第7章 商家详情页开发

      • 视频：7-1 业务组件-ShopView 商家详情页(14:13)
      • 视频：7-2 业务组件-Header 商家头部组件开发-1(20:58)
      • 视频：7-3 业务组件-Header 商家头部组件开发-2(19:17)
      • 视频：7-4 业务组件-GoodsList 商品列表组件开发(23:22)
      • 视频：7-5 业务组件-GoodsItem 商品列表项组件开发-1(10:20)
      • 视频：7-6 业务组件-CartContrl 购物车控件组件开发-2(12:50)
      • 视频：7-7 自定义hooks-useCartStore 管理购物车数据状态-1(14:36)
      • 视频：7-8 自定义hooks-useCartStore 管理购物车数据状态-2(13:12)
      • 视频：7-9 业务组件-ShopCart 购物车组件开发-1(18:55)
      • 视频：7-10 业务组件-ShopCart 购物车组件开发-2(19:23)
      • 视频：7-11 -自定义hooks-useTransition 实现加入购物车动画效果(21:52)
      • 视频：7-12 -自定义hooks-useEventBus 使用事件机制实现跨组件通信

      • 第8章 商品列表组件开发15 节 | 217分钟

        本章将带领大家从 0 到 1 实现一个滚动视图组件，涉及如何设计一些类库的思想和方法，包括常见的设计模式，比如工厂模式、代理模式、组合模式、责任链模式、发布订阅模式等，让你对类库的封装有更深一层的认识。

        收起列表

        • 视频：8-1 基础组件-ScrollView 实现原理讲解和开发-1 (09:45)
        • 视频：8-2 基础组件-ScrollView 实现原理讲解和开发-2 (13:11)
        • 视频：8-3 -基础类-代理模式 MScroll 类和 Options 配置处理类 (23:06)