大前端三劍客：Vue+React+Flutter

第1篇基礎(chǔ)篇
第1章大前端發(fā)展趨勢(shì)
1.1大前端的發(fā)展過(guò)程
1.2Node.js引領(lǐng)JavaScript進(jìn)入全棧時(shí)代
1.3小程序、輕應(yīng)用開(kāi)啟前端新模式
1.4Flutter引領(lǐng)跨平臺(tái)開(kāi)發(fā)
1.5華為ArkUI探索物聯(lián)網(wǎng)全場(chǎng)景開(kāi)發(fā)
1.6大前端的革命與未來(lái)
第2章ECMAScript 6
2.1ECMAScript 6介紹
2.2Babel轉(zhuǎn)碼器
2.3let和const
2.4解構(gòu)賦值
2.5字符串的擴(kuò)展
2.5.1字符串新增方法
2.5.2字符串模板
2.6數(shù)組的擴(kuò)展
2.6.1擴(kuò)展運(yùn)算符
2.6.2Array.from()
2.6.3Array.of()
2.6.4Array.find() 和 Array.findIndex()
2.6.5Array.includes()
2.6.6Array.copyWithin()
2.6.7Array.entries().keys().values()
2.6.8Array.fill()
2.6.9flat()、flatMap()
2.7對(duì)象的擴(kuò)展
2.7.1對(duì)象字面量
2.7.2屬性名表達(dá)式
2.7.3super關(guān)鍵字
2.7.4對(duì)象的擴(kuò)展運(yùn)算符
2.8Symbol
2.9Set和Map數(shù)據(jù)結(jié)構(gòu)
2.9.1Map對(duì)象
2.9.2Set 對(duì)象
2.10Proxy
2.11Reflect
2.11.1Reflect()靜態(tài)方法
2.11.2Reflect與Proxy組合使用
2.12異步編程
2.12.1Promise
2.12.2Generator
2.12.3async/await
2.13類的用法
2.13.1類的定義
2.13.2類的構(gòu)造函數(shù)與實(shí)例
2.13.3類的屬性和方法
2.13.4類的繼承
2.14模塊化Module
2.14.1ECMAScript 6的模塊化特點(diǎn)
2.14.2模塊化開(kāi)發(fā)的優(yōu)缺點(diǎn)
2.14.3模塊的定義
2.14.4模塊的導(dǎo)出
2.14.5模塊的導(dǎo)入
第3章前端構(gòu)建工具
3.1前端構(gòu)建工具介紹
3.1.1為什么需要構(gòu)建工具
3.1.2構(gòu)建工具的功能需求
3.1.3前端構(gòu)建工具演變
3.1.4NPM與Yarn、PNPM
3.2Webpack
3.2.1Webpack介紹
3.2.2Webpack安裝與配置
3.2.3Webpack基礎(chǔ)
3.2.4Webpack進(jìn)階
3.3Rollup
3.3.1Rollup介紹
3.3.2Rollup安裝與配置
3.3.3Rollup基礎(chǔ)
3.4ESBuild
3.5Vite
3.5.1Vite介紹
3.5.2Vite基本使用
3.5.3Vite原理
第4章TypeScript
4.1TypeScript介紹
4.2TypeScript安裝與配置
4.3TypeScript基礎(chǔ)數(shù)據(jù)類型
4.4TypeScript高級(jí)數(shù)據(jù)類型
4.4.1泛型
4.4.2交叉類型
4.4.3聯(lián)合類型
4.5TypeScript面向?qū)ο筇匦?br />4.5.1類
4.5.2接口
4.6TypeScript裝飾器
4.6.1屬性裝飾器
4.6.2方法裝飾器
4.6.3參數(shù)裝飾器
4.6.4類裝飾器
4.7TypeScript模塊與命名空間
4.7.1模塊
4.7.2命名空間
第5章Dart語(yǔ)言
5.1Dart語(yǔ)言介紹
5.2安裝與配置
5.3第1個(gè)Dart程序
5.4變量與常量
5.5內(nèi)置類型
5.6函數(shù)
5.7運(yùn)算符
5.8分支與循環(huán)
5.9異常處理
5.10面向?qū)ο缶幊?br />5.10.1類與對(duì)象
5.10.2類的繼承
5.10.3抽象類
5.10.4多態(tài)
5.10.5隱式接口
5.10.6擴(kuò)展類
5.11泛型
5.12異步支持
5.12.1Future對(duì)象
5.12.2async函數(shù)與await表達(dá)式
5.13庫(kù)和庫(kù)包
5.13.1庫(kù)
5.13.2自定義庫(kù)包
5.13.3系統(tǒng)庫(kù)
5.13.4第三方庫(kù)
第6章包管理與腳手架
6.1MonoRepo包管理
6.1.1單倉(cāng)與多倉(cāng)庫(kù)管理
6.1.2Lerna包管理工具介紹
6.1.3Lerna包組織結(jié)構(gòu)
6.1.4Lerna安裝與配置
6.1.5Lerna操作流程演示
6.1.6Yarn Workspace
6.1.7Yarn Workspace與Lerna
6.2設(shè)計(jì)一個(gè)企業(yè)級(jí)腳手架工具
6.2.1腳手架作用
6.2.2常見(jiàn)的腳手架工具
6.2.3腳手架思路
6.2.4第三方依賴介紹
6.2.5腳手架架構(gòu)圖
6.2.6創(chuàng)建腳手架工程與測(cè)試發(fā)布
6.2.7腳手架命令行開(kāi)發(fā)
第2篇Vue 3框架篇
第7章Vue 3語(yǔ)法基礎(chǔ)
7.1Vue 3框架介紹
7.1.1Vue 3框架核心思想
7.1.2Vue 3框架的新特征
7.2Vue 3開(kāi)發(fā)環(huán)境搭建
7.2.1Visual Code安裝與配置
7.2.2安裝Vue DevTools
7.2.3編寫第1個(gè)Vue 3程序
7.3Vue 3項(xiàng)目搭建方法
7.3.1手動(dòng)搭建Vue 3項(xiàng)目
7.3.2通過(guò)腳手架工具搭建Vue 3項(xiàng)目
7.3.3Vue 3項(xiàng)目目錄結(jié)構(gòu)
7.4Vue 3應(yīng)用創(chuàng)建
7.4.1createApp()方法
7.4.2數(shù)據(jù)屬性和方法
7.4.3計(jì)算屬性和監(jiān)聽(tīng)器
7.4.4模板和render()函數(shù)
7.5Vue 3模板語(yǔ)法
7.5.1插值表達(dá)式
7.5.2什么是指令
7.5.3數(shù)據(jù)綁定指令
7.5.4class與style綁定
7.5.5條件指令
7.5.6循環(huán)指令
7.5.7事件綁定指令
7.5.8表單綁定指令
7.5.9案例： 省市區(qū)多級(jí)聯(lián)動(dòng)效果
7.6Vue 3組件開(kāi)發(fā)
7.6.1組件定義
7.6.2組件的命名規(guī)則
7.6.3組件的結(jié)構(gòu)
7.6.4組件的接口屬性
7.6.5組件的生命周期方法
7.6.6組件的插槽
7.6.7提供/注入模式
7.6.8動(dòng)態(tài)組件與異步組件
7.6.9混入
7.7響應(yīng)性API
7.7.1setup()
7.7.2ref()
7.7.3reactive()
7.7.4toRef
7.7.5toRefs()
7.7.6computed()
7.7.7watch()
7.7.8watchEffect
7.7.9setup()生命周期函數(shù)
7.7.10單頁(yè)面組件
7.7.11Provide與Inject
7.8Vue 3過(guò)渡和動(dòng)畫
7.8.1過(guò)渡與動(dòng)畫
7.8.2Transition和TransitionGroup組件
7.8.3進(jìn)入過(guò)渡與離開(kāi)過(guò)渡
7.8.4案例： 飛到購(gòu)物車動(dòng)畫
7.9Vue 3復(fù)用與組合
7.9.1自定義指令
7.9.2Teleport
7.9.3插件
7.10Vue 3路由
7.10.1路由入門
7.10.2路由參數(shù)傳遞
7.10.3嵌套模式路由
7.10.4命名視圖
7.10.5路由守衛(wèi)
7.10.6數(shù)據(jù)獲取
7.11Vue 3狀態(tài)管理(Vuex)
7.11.1狀態(tài)管理模式
7.11.2Vuex和全局變量的概念區(qū)別
7.11.3Vuex中的5個(gè)重要屬性
7.11.4Vuex開(kāi)發(fā)入門基礎(chǔ)
7.11.5Vuex開(kāi)發(fā)實(shí)踐
7.11.6Vuex中組合式API的用法
7.12Vue 3狀態(tài)管理(Pinia)
7.12.1Pinia與Vuex寫法比較
7.12.2Pinia安裝和集成
7.12.3Pinia核心概念
第8章Vue 3進(jìn)階原理
8.1Vue 3源碼安裝編譯與調(diào)試
8.1.1Vue 3源碼包介紹
8.1.2Vue 3源碼下載與編譯
8.2Vue 3響應(yīng)式數(shù)據(jù)系統(tǒng)核心原理
8.2.1reactivity模塊介紹
8.2.2reactivity模塊使用
8.2.3reactive實(shí)現(xiàn)原理
8.2.4依賴收集與派發(fā)更新
8.2.5Vue 3響應(yīng)式原理總結(jié)
8.3Vue 2 Diff算法(雙端Diff算法)
8.3.1雙端Diff算法原理
8.3.2非理性狀態(tài)的處理方式
8.4Vue 3 Diff算法(快速Diff算法)
第9章Vue 3組件庫(kù)開(kāi)發(fā)實(shí)戰(zhàn)
9.1如何設(shè)計(jì)一個(gè)組件庫(kù)
9.1.1組件庫(kù)設(shè)計(jì)方法論
9.1.2組件庫(kù)的設(shè)計(jì)原則
9.1.3組件庫(kù)開(kāi)發(fā)的技術(shù)選型
9.1.4組件框架樣式主題設(shè)計(jì)
9.2搭建組件庫(kù)項(xiàng)目
9.2.1搭建MonoRepo項(xiàng)目結(jié)構(gòu)
9.2.2搭建基礎(chǔ)組件庫(kù)(packages/vueui3)
9.2.3搭建主題樣式項(xiàng)目
9.3組件庫(kù)詳細(xì)設(shè)計(jì)
9.3.1Icon圖標(biāo)組件
9.3.2Button組件
9.4搭建Playgrounds項(xiàng)目
9.4.1創(chuàng)建Playgrounds項(xiàng)目
9.4.2測(cè)試Playgrounds項(xiàng)目
9.5組件庫(kù)發(fā)布與集成
9.5.1添加publishConfig配置
9.5.2設(shè)置發(fā)布包的文件或者目錄
9.5.3提交代碼到Git倉(cāng)庫(kù)
9.5.4使用Commitizen規(guī)范的commit message
9.5.5使用Lint Husky規(guī)范的commit message
9.5.6使用Lerna生成changelogs
9.5.7將庫(kù)發(fā)布到npmjs網(wǎng)站
第3篇React框架篇
第10章React語(yǔ)法基礎(chǔ)
10.1框架介紹
10.1.1React框架由來(lái)
10.1.2React框架特點(diǎn)
10.2開(kāi)發(fā)準(zhǔn)備
10.2.1手動(dòng)搭建React項(xiàng)目
10.2.2通過(guò)腳手架工具搭建React項(xiàng)目
10.2.3安裝React調(diào)試工具
10.3JSX與虛擬DOM
10.3.1JSX語(yǔ)法介紹
10.3.2React.createElement和虛擬DOM
10.3.3事件處理
10.3.4條件渲染
10.3.5列表與Key
10.4元素渲染
10.4.1客戶端渲染
10.4.2服務(wù)器端渲染
10.5組件
10.5.1React元素與組件的區(qū)別
10.5.2創(chuàng)建組件
10.5.3組件的輸入接口
10.5.4組件的狀態(tài)
10.5.5組件中函數(shù)處理
10.5.6組件的生命周期
10.5.7組件的引用
10.6組件設(shè)計(jì)與優(yōu)化
10.6.1高階組件
10.6.2Context模式
10.6.3Component 與PureComponent
10.6.4React.memo
10.6.5組件懶加載
10.6.6Portals
10.7React Hook
10.7.1React Hook介紹
10.7.2useState()
10.7.3useEffect()
10.7.4useLayoutEffect()
10.7.5useRef()
10.7.6useCallback()與useMemo()
10.7.7useContext()
10.7.8useReducer()
10.7.9自定義Hook
10.8路由(React Router)
10.8.1安裝React Router
10.8.2兩種模式的路由
10.8.3簡(jiǎn)單路由
10.8.4嵌套模式路由
10.8.5路由參數(shù)
10.8.6編程式路由導(dǎo)航
10.8.7多個(gè)Routes/
10.9狀態(tài)管理(Redux)
10.9.1Redux介紹
10.9.2Redux基本用法
10.9.3Redux核心對(duì)象
10.9.4Redux中間件介紹
10.9.5Redux中間件(reduxthunk)
10.9.6Redux中間件(reduxsaga)
10.9.7Redux Toolkit簡(jiǎn)化Redux代碼
10.10狀態(tài)管理(Recoil)
10.10.1Recoil介紹
10.10.2Recoil核心概念
10.10.3Recoil核心API
10.11React移動(dòng)端開(kāi)發(fā)(React Native)
10.11.1React Native優(yōu)點(diǎn)
10.11.2React Native安裝與配置
第11章React進(jìn)階原理
11.1React源碼調(diào)試
11.1.1React源碼下載與編譯
11.1.2React源碼包介紹
11.2React架構(gòu)原理
11.2.1React 15版架構(gòu) 
11.2.2React 16版架構(gòu) 
11.2.3React Scheduler實(shí)現(xiàn)
第12章React組件庫(kù)開(kāi)發(fā)實(shí)戰(zhàn)
12.1React組件庫(kù)設(shè)計(jì)準(zhǔn)備
12.1.1組件庫(kù)設(shè)計(jì)基本目標(biāo)
12.1.2組件庫(kù)技術(shù)選型
12.2搭建React組件庫(kù)(MonoRepo)
12.2.1初始化Lerna項(xiàng)目
12.2.2創(chuàng)建React組件庫(kù)(Package)
12.2.3創(chuàng)建一個(gè)Button組件
12.2.4使用Rollup進(jìn)行組件庫(kù)打包
12.3創(chuàng)建Playgrounds
12.4通過(guò)Jest搭建組件庫(kù)測(cè)試
12.4.1安裝配置測(cè)試框架
12.4.2編寫組件測(cè)試代碼
12.4.3啟動(dòng)單元測(cè)試
12.5使用Storybook搭建組件文檔
12.6將組件庫(kù)發(fā)布到NPM
第4篇Flutter 2框架篇
第13章Flutter語(yǔ)法基礎(chǔ)
13.1Flutter介紹
13.2開(kāi)發(fā)環(huán)境搭建
13.2.1Windows安裝配置Flutter SDK
13.2.2macOS安裝配置Flutter SDK
13.2.3配置VS Code開(kāi)發(fā)Flutter
13.3第1個(gè)Flutter應(yīng)用
13.3.1創(chuàng)建Flutter App項(xiàng)目
13.3.2編寫Flutter App界面
13.3.3添加交互邏輯
13.4組件
13.5包管理
13.5.1pubspec.yaml文件
13.5.2通過(guò)pub倉(cāng)庫(kù)管理包
13.5.3以其他方式管理包
13.6資源管理
13.6.1圖片資源管理
13.6.2多像素密度的圖片管理
13.6.3字體資源的聲明
13.6.4原生平臺(tái)的資源設(shè)置
13.7組件設(shè)計(jì)風(fēng)格
13.7.1Material(Android)風(fēng)格組件
13.7.2Cupertino(iOS)風(fēng)格組件
13.8尺寸單位與適配
13.9基礎(chǔ)組件
13.9.1基礎(chǔ)組件介紹
13.9.2構(gòu)建布局
13.9.3列表與可滾動(dòng)組件
13.9.4表單組件
13.10路由管理
13.10.1路由的基礎(chǔ)用法
13.10.2路由傳值
13.10.3命名路由
13.10.4路由攔截
13.10.5嵌套模式路由
13.11事件處理與通知
13.11.1原始指針事件
13.11.2手勢(shì)識(shí)別
13.11.3全局事件總線
13.11.4事件通知
13.12網(wǎng)絡(luò)
13.12.1HttpClient
13.12.2HTTP庫(kù)
13.12.3Dio庫(kù)
13.12.4WebSocket
13.12.5Isolate
13.13狀態(tài)管理
13.13.1InheritedWidget
13.13.2scoped_model
13.14Stream與BLoC模式
13.14.1Stream
13.14.2RxDart
13.14.3BLoC模式
第14章Flutter Web和桌面應(yīng)用
14.1Flutter Web介紹
14.1.1Flutter Web框架架構(gòu)
14.1.2Flutter Web的兩種編譯器
14.1.3Flutter Web支持的兩種渲染模式
14.1.4創(chuàng)建一個(gè)Flutter Web項(xiàng)目
14.2Flutter Desktop介紹
14.3Flutter Desktop開(kāi)發(fā)案例
第15章Flutter插件庫(kù)開(kāi)發(fā)實(shí)戰(zhàn)
15.1Flutter插件庫(kù)開(kāi)發(fā)介紹
15.2Flutter自定義組件庫(kù)的3種方式
15.3Flutter自定義插件(Plugin)
15.4在Pub上發(fā)布自己的Package