我已經(jīng)學(xué)了挺好的，分享給大家一起學(xué)習(xí)

vue3+Pinia+Vite+TS 還原高性能外賣APP項(xiàng)目
提升你的工業(yè)級業(yè)務(wù)實(shí)現(xiàn)能力，塑造你的業(yè)務(wù)思維，編程思維，設(shè)計思維

Vue3 帶來的改變，除了其自身新特性，還有相應(yīng)的技術(shù)棧變化——比如 Pinia 將逐漸替代 Vuex 。本課程將帶領(lǐng)大家使用 Vue3.2 + Pinia+ Vite + TS 高仿餓了么 Web App，幫助大家掌握 Vue3“全家桶”技術(shù)棧的同時，還掌握前端性能優(yōu)化的常用方法和巧用設(shè)計模式應(yīng)對復(fù)雜應(yīng)用場景的能力。

適合人群
1-2 年前端開發(fā)者
想要學(xué)習(xí) Vue3 的前端開發(fā)者
有移動端 Web 開發(fā)需求的開發(fā)者
技術(shù)儲備
掌握前端基礎(chǔ)知識 HTML、CSS、JavaScript
有 Vue 相關(guān)基礎(chǔ)及經(jīng)驗(yàn)
有 Node.js、npm 使用經(jīng)驗(yàn)
環(huán)境參數(shù)
Vue 3.2.27
腳手架 create-vue 3.3.1
構(gòu)建工具 Vite 3.0.1
路由 Vue-Router 4.1.2
狀態(tài)管理 Pinia 2.0.16
請求庫 Axios 1.1.3
ui 組件庫 Vant 3.6.2
TS 4.7.4

目錄大綱：

第1章 課程簡介 試看4 節(jié) | 29分鐘
對課程進(jìn)行簡單的介紹。

收起列表
視頻：
1-1 導(dǎo)學(xué) (08:33)
試看
視頻：
1-2 -課程內(nèi)容 (04:57)
視頻：
1-3 -課程知識點(diǎn) (02:38)
視頻：
1-4 -項(xiàng)目展示 (12:33)
第2章 TypeScript 基礎(chǔ)知識2 節(jié) | 24分鐘
本章將帶領(lǐng)大家了解 TypeScript 的必要性，幫助大家學(xué)習(xí) TypeScript 的基礎(chǔ)類型和用法，包括 Interface、Class、Function、Enum、泛型等。

收起列表
視頻：
2-1 什么是 typescript (07:24)
視頻：
2-2 安裝使用&基礎(chǔ)概念-安裝使用 (15:38)
第3章 Git 使用 試看6 節(jié) | 58分鐘
本章將介紹版本控制工具 Git，帶領(lǐng)大家安裝和配置 Git，幫助大家了解 Git 的使用以及學(xué)習(xí)常用的命令。

收起列表
視頻：
3-1 Git 介紹與配置 (15:45)
試看
視頻：
3-2 使用 create-vue 創(chuàng)建 vue3 項(xiàng)目 (03:16)
視頻：
3-3 使用 vite 創(chuàng)建 vue3 項(xiàng)目 (09:59)
視頻：
3-4 Git 介紹：如何創(chuàng)建 Git 項(xiàng)目 (07:21)
視頻：
3-5 Git 文件狀態(tài)：如何提交代碼 (08:01)
視頻：
3-6 Git 協(xié)作：如何分支管理 (13:30)
第4章 項(xiàng)目搭建及前期準(zhǔn)備17 節(jié) | 172分鐘
本章將介紹 vite 工具，使用 vite 創(chuàng)建項(xiàng)目代碼，同時配置諸如 eslint 等插件，對項(xiàng)目進(jìn)行代碼卡控。接著我們將搭建 Mock Server，配置自定義請求代理，完成前后端聯(lián)調(diào)環(huán)境。

收起列表
視頻：
4-1 使用 husky 管理 Git Hooks (03:39)
視頻：
4-2 使用 commitlint 規(guī)范 commit 信息 (07:58)
視頻：
4-3 配置 eslint、prettier 規(guī)范項(xiàng)目 (11:45)
圖文：
4-4 配置 .editorconfig
圖文：
4-5 使用 lint-staged 配置 pre-commit
視頻：
4-6 安裝 vant-ui 和使用 Vite 按需加載組件 (21:09)
視頻：
4-7 vue-router 實(shí)現(xiàn)頁面路由-01 (15:54)
視頻：
4-8 vue-router 實(shí)現(xiàn)頁面路由-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 請求庫，設(shè)置請求攔截-01 (06:47)
視頻：
4-13 -使用 axios 請求庫，設(shè)置請求攔截-02 (12:48)
視頻：
4-14 -使用 post-css 實(shí)現(xiàn)移動端適配-01 (10:22)
視頻：
4-15 -使用 post-css 實(shí)現(xiàn)移動端適配-02 (10:59)
視頻：
4-16 -配置 vite 自動按需引入 vant 組件-01 (06:13)
視頻：
4-17 -配置 vite 自動按需引入 vant 組件-02 (06:32)
第5章 首頁開發(fā)17 節(jié) | 213分鐘
本章開始正式的項(xiàng)目開發(fā)，我們將帶領(lǐng)大家使用 vue-router 實(shí)現(xiàn)整體頁面的框架，接著開發(fā)項(xiàng)目首頁的基礎(chǔ)和業(yè)務(wù)組件，包括 Search 搜索框、List 列表加載、ScrollBar 滾動提示欄、CountDown 倒計時等組件，同時我們將實(shí)現(xiàn)自定義 hooks，體驗(yàn)自定義 hooks 帶來的好處?！?/p>

收起列表
視頻：
5-1 -頁面頭部實(shí)現(xiàn) (29:25)
視頻：
5-2 -基礎(chǔ)組件-Search 搜索框組件開發(fā)-01 (04:48)
視頻：
5-3 -基礎(chǔ)組件-Search 搜索框組件開發(fā)-02 (16:30)
視頻：
5-4 -基礎(chǔ)組件-Search 搜索框組件開發(fā)-03 (10:20)
視頻：
5-5 -自定義hooks-useToggle實(shí)現(xiàn)搜索頁展示切換-01 (01:20)
視頻：
5-6 -自定義hooks-useToggle實(shí)現(xiàn)搜索頁展示切換-02 (14:39)
視頻：
5-7 業(yè)務(wù)組件-SearchView組件開發(fā)-01 (02:00)
視頻：
5-8 業(yè)務(wù)組件-SearchView組件開發(fā)-02 (27:48)
視頻：
5-9 業(yè)務(wù)組件-SearchView組件開發(fā)-03 (29:58)
視頻：
5-10 性能優(yōu)化：useDounce避免多次請求-01 (10:33)
視頻：
5-11 性能優(yōu)化：useDounce避免多次請求-02 (10:28)
視頻：
5-12 自定義hooks-useAsync 實(shí)現(xiàn)請求處理-01 (01:26)
視頻：
5-13 自定義hooks-useAsync 實(shí)現(xiàn)請求處理-02 (20:43)
視頻：
5-14 基礎(chǔ)組件-LoadingView 組件實(shí)現(xiàn)加載骨架-01 (01:37)
視頻：
5-15 基礎(chǔ)組件-LoadingView 組件實(shí)現(xiàn)加載骨架-02 (11:01)
視頻：
5-16 業(yè)務(wù)組件-Grid 布局實(shí)現(xiàn) Transformer 金剛位組件-01 (08:48)
視頻：
5-17 業(yè)務(wù)組件-Grid 布局實(shí)現(xiàn) Transformer 金剛位組件-02 (10:44)
第6章 我的頁面開發(fā)內(nèi)容更新中
本章我們將開發(fā)我的頁面，帶領(lǐng)大家了解 Token 登錄機(jī)制原理，幫助大家實(shí)現(xiàn)用戶登錄相關(guān)功能。帶你初次體驗(yàn) Vuex 的應(yīng)用，掌握 Vuex 的用法。

第7章 商家詳情頁開發(fā)內(nèi)容更新中
本章我們將開發(fā)商家詳情頁，包括 Header 頭部組件、GoodList 商品列表組件、CartContrl 組件、ShopCart 購物車組件等。帶領(lǐng)大家了解常見的購物車場景的實(shí)現(xiàn)原理，以及購物車動畫原理，加深對 Vuex 以及 <transition> 組件的使用。

第8章 商品列表組件開發(fā)內(nèi)容更新中
本章將帶領(lǐng)大家從 0 到 1 實(shí)現(xiàn)一個滾動視圖組件，涉及如何設(shè)計一些類庫的思想和方法，包括常見的設(shè)計模式，比如工廠模式、代理模式、組合模式、責(zé)任鏈模式、發(fā)布訂閱模式等，讓你對類庫的封裝有更深一層的認(rèn)識。

第9章 商品詳情頁開發(fā)內(nèi)容更新中
本章將完成商品詳情頁的開發(fā)，我們將使用之前封裝的購物車相關(guān)的組件，直接實(shí)現(xiàn)加入購物車的邏輯，體驗(yàn)組件復(fù)用的便利性。

第10章 項(xiàng)目部署內(nèi)容更新中
本章將帶領(lǐng)大家部署項(xiàng)目代碼，幫助大家理解持續(xù)集成交付的概念以及相關(guān)工具，并實(shí)踐如何搭建一套簡易的自動構(gòu)建的發(fā)布流水線。

第11章 課程總結(jié)內(nèi)容更新中
本章帶領(lǐng)大家回顧課程內(nèi)容。

本課程持續(xù)更新中