课程简介：

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

网盘截图：

  • 更多实战点击：链接

  • 更多体系 课点击：链接

目录：

    • 视频：1-1 导学(08:33)

    • 视频：1-2 -课程内容(04:57)

    • 视频：1-3 -课程知识点(02:38)

    • 视频：1-4 -项目展示(12:33)

    • 视频：2-1 什么是 typescript(07:24)

    • 视频：2-2 安装使用&基础概念-安装使用(15:38)

    • 视频：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-1 使用 husky 管理 Git Hooks(03:39)

    • 视频：4-2 使用 commitlint 规范 commit 信息(07:58)

    • 视频：4-3 配置 eslint、prettier 规范项目(11:45)

    • 图文：4-4 配置 .editorconfig

    • 图文：4-5 使用 lint-staged 配置 pre-commit最近学习

    • 视频：4-6 安装 vant-ui 和使用 Vite 按需加载组件(21:09)

    • 视频：4-7 vue-router 实现页面路由-01(15:54)

    • 视频：4-8 vue-router 实现页面路由-01(09:33)

    • 视频：4-9 使用 json-server 搭建 Mock Server-01(07:53)

    • 视频：4-10 使用 json-server 搭建 Mock Server-02(20:40)

    • 视频：4-11 介绍 Vite 和使用 Vite 配置请求代理(19:12)

    • 视频：4-12 -使用 axios 请求库，设置请求拦截-01(06:47)

    • 视频：4-13 -使用 axios 请求库，设置请求拦截-02(12:48)

    • 视频：4-14 -使用 post-css 实现移动端适配-01(10:22)

    • 视频：4-15 -使用 post-css 实现移动端适配-02(10:59)

    • 视频：4-16 -配置 vite 自动按需引入 vant 组件-01(06:13)

    • 视频：4-17 -配置 vite 自动按需引入 vant 组件-02(06:32)

    • 视频：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-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)

    • 第1章 课程简介

      第2章 Typescript 基础知识

      第3章 Git 使用

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

      第5章 首页开发

      第6章 我的页面开发