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

 

 

目錄

第1篇基礎篇

 

第1章大前端發展趨勢

 

1.1大前端的發展過程

 

1.2Node.js引領JavaScript進入全棧時代

 

1.3小程序、輕應用開啟前端新模式

 

1.4Flutter引領跨平臺開發

 

1.5華為ArkUI探索物聯網全場景開發

 

1.6大前端的革命與未來

 

第2章ECMAScript 6

 

2.1ECMAScript 6介紹

 

2.2Babel轉碼器

 

2.3let和const

 

2.4解構賦值

 

2.5字符串的擴展

 

2.5.1字符串新增方法

 

2.5.2字符串模板

 

2.6數組的擴展

 

2.6.1擴展運算符

 

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對象的擴展

 

2.7.1對象字面量

 

2.7.2屬性名錶達式

 

2.7.3super關鍵字

 

2.7.4對象的擴展運算符

 

2.8Symbol

 

2.9Set和Map數據結構

 

2.9.1Map對象

 

2.9.2Set 對象

 

2.10Proxy

 

2.11Reflect

 

2.11.1Reflect()靜態方法

 

2.11.2Reflect與Proxy組合使用

 

2.12異步編程

 

2.12.1Promise

 

2.12.2Generator

 

2.12.3async/await

 

2.13類的用法

 

2.13.1類的定義

 

2.13.2類的構造函數與實例

 

2.13.3類的屬性和方法

 

2.13.4類的繼承

 

2.14模塊化Module

 

2.14.1ECMAScript 6的模塊化特點

 

2.14.2模塊化開發的優缺點

 

2.14.3模塊的定義

 

2.14.4模塊的導出

 

2.14.5模塊的導入

 

第3章前端構建工具

 

3.1前端構建工具介紹

 

3.1.1為什麽需要構建工具

 

3.1.2構建工具的功能需求

 

3.1.3前端構建工具演變

 

 

3.1.4NPM與Yarn、PNPM

 

3.2Webpack

 

3.2.1Webpack介紹

 

3.2.2Webpack安裝與配置

 

3.2.3Webpack基礎

 

3.2.4Webpack進階

 

3.3Rollup

 

3.3.1Rollup介紹

 

3.3.2Rollup安裝與配置

 

3.3.3Rollup基礎

 

3.4ESBuild

 

3.5Vite

 

3.5.1Vite介紹

 

3.5.2Vite基本使用

 

3.5.3Vite原理

 

第4章TypeScript

 

4.1TypeScript介紹

 

4.2TypeScript安裝與配置

 

4.3TypeScript基礎數據類型

 

4.4TypeScript高級數據類型

 

4.4.1泛型

 

4.4.2交叉類型

 

4.4.3聯合類型

 

4.5TypeScript面向對象特性

 

4.5.1類

 

4.5.2接口

 

4.6TypeScript裝飾器

 

4.6.1屬性裝飾器

 

4.6.2方法裝飾器

 

4.6.3參數裝飾器

 

4.6.4類裝飾器

 

4.7TypeScript模塊與命名空間

 

4.7.1模塊

 

4.7.2命名空間

 

 

第5章Dart語言

 

5.1Dart語言介紹

 

5.2安裝與配置

 

5.3第1個Dart程序

 

5.4變量與常量

 

5.5內置類型

 

5.6函數

 

5.7運算符

 

5.8分支與循環

 

5.9異常處理

 

5.10面向對象編程

 

5.10.1類與對象

 

5.10.2類的繼承

 

5.10.3抽象類

 

5.10.4多態

 

5.10.5隱式接口

 

5.10.6擴展類

 

5.11泛型

 

5.12異步支持

 

5.12.1Future對象

 

5.12.2async函數與await表達式

 

5.13庫和庫包

 

5.13.1庫

 

5.13.2自定義庫包

 

5.13.3系統庫

 

5.13.4第三方庫

 

第6章包管理與腳手架

 

6.1MonoRepo包管理

 

6.1.1單倉與多倉庫管理

 

6.1.2Lerna包管理工具介紹

 

6.1.3Lerna包組織結構

 

6.1.4Lerna安裝與配置

 

6.1.5Lerna操作流程演示

 

6.1.6Yarn Workspace

 

6.1.7Yarn Workspace與Lerna

 

6.2設計一個企業級腳手架工具

 

6.2.1腳手架作用

 

6.2.2常見的腳手架工具

 

6.2.3腳手架思路

 

6.2.4第三方依賴介紹

 

6.2.5腳手架架構圖

 

6.2.6創建腳手架工程與測試發布

 

6.2.7腳手架命令行開發

 

第2篇Vue 3框架篇

 

第7章Vue 3語法基礎

 

7.1Vue 3框架介紹

 

7.1.1Vue 3框架核心思想

 

7.1.2Vue 3框架的新特徵

 

7.2Vue 3開發環境搭建

 

7.2.1Visual Code安裝與配置

 

7.2.2安裝Vue DevTools

 

7.2.3編寫第1個Vue 3程序

 

7.3Vue 3項目搭建方法

 

7.3.1手動搭建Vue 3項目

 

7.3.2通過腳手架工具搭建Vue 3項目

 

7.3.3Vue 3項目目錄結構

 

7.4Vue 3應用創建

 

7.4.1createApp()方法

 

7.4.2數據屬性和方法

 

7.4.3計算屬性和監聽器

 

7.4.4模板和render()函數

 

7.5Vue 3模板語法

 

7.5.1插值表達式

 

7.5.2什麽是指令

 

7.5.3數據綁定指令

 

7.5.4class與style綁定

 

7.5.5條件指令

 

7.5.6循環指令

 

7.5.7事件綁定指令

 

7.5.8表單綁定指令

 

7.5.9案例： 省市區多級聯動效果

 

7.6Vue 3組件開發

 

7.6.1組件定義

 

7.6.2組件的命名規則

 

7.6.3組件的結構

 

7.6.4組件的接口屬性

 

7.6.5組件的生命周期方法

 

7.6.6組件的插槽

 

7.6.7提供/註入模式

 

7.6.8動態組件與異步組件

 

7.6.9混入

 

7.7響應性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()生命周期函數

 

7.7.10單頁面組件

 

7.7.11Provide與Inject

 

7.8Vue 3過渡和動畫

 

7.8.1過渡與動畫

 

7.8.2Transition和TransitionGroup組件

 

7.8.3進入過渡與離開過渡

 

7.8.4案例： 飛到購物車動畫

 

7.9Vue 3復用與組合

 

7.9.1自定義指令

 

7.9.2Teleport

 

7.9.3插件

 

7.10Vue 3路由

 

7.10.1路由入門

 

7.10.2路由參數傳遞

 

7.10.3嵌套模式路由

 

7.10.4命名視圖

 

7.10.5路由守衛

 

7.10.6數據獲取

 

7.11Vue 3狀態管理(Vuex)

 

7.11.1狀態管理模式

 

7.11.2Vuex和全局變量的概念區別

 

7.11.3Vuex中的5個重要屬性

 

7.11.4Vuex開發入門基礎

 

7.11.5Vuex開發實踐

 

7.11.6Vuex中組合式API的用法

 

7.12Vue 3狀態管理(Pinia)

 

7.12.1Pinia與Vuex寫法比較

 

7.12.2Pinia安裝和集成

 

7.12.3Pinia核心概念

 

第8章Vue 3進階原理

 

8.1Vue 3源碼安裝編譯與調試

 

8.1.1Vue 3源碼包介紹

 

8.1.2Vue 3源碼下載與編譯

 

8.2Vue 3響應式數據系統核心原理

 

8.2.1reactivity模塊介紹

 

8.2.2reactivity模塊使用

 

8.2.3reactive實現原理

 

8.2.4依賴收集與派發更新

 

8.2.5Vue 3響應式原理總結

 

8.3Vue 2 Diff算法(雙端Diff算法)

 

8.3.1雙端Diff算法原理

 

8.3.2非理性狀態的處理方式

 

8.4Vue 3 Diff算法(快速Diff算法)

 

第9章Vue 3組件庫開發實戰

 

9.1如何設計一個組件庫

 

9.1.1組件庫設計方法論

 

9.1.2組件庫的設計原則

 

9.1.3組件庫開發的技術選型

 

9.1.4組件框架樣式主題設計

 

9.2搭建組件庫項目

 

9.2.1搭建MonoRepo項目結構

 

9.2.2搭建基礎組件庫(packages/vueui3)

 

9.2.3搭建主題樣式項目

 

9.3組件庫詳細設計

 

9.3.1Icon圖標組件

 

9.3.2Button組件

 

9.4搭建Playgrounds項目

 

9.4.1創建Playgrounds項目

 

9.4.2測試Playgrounds項目

 

9.5組件庫發布與集成

 

9.5.1添加publishConfig配置

 

9.5.2設置發布包的文件或者目錄

 

9.5.3提交代碼到Git倉庫

 

9.5.4使用Commitizen規範的commit message

 

9.5.5使用Lint+Husky規範的commit message

 

9.5.6使用Lerna生成changelogs

 

9.5.7將庫發布到npmjs網站

 

 

第3篇React框架篇

 

 

第10章React語法基礎

 

10.1框架介紹

 

10.1.1React框架由來

 

10.1.2React框架特點

 

10.2開發準備

 

10.2.1手動搭建React項目

 

10.2.2通過腳手架工具搭建React項目

 

10.2.3安裝React調試工具

 

10.3JSX與虛擬DOM

 

10.3.1JSX語法介紹

 

10.3.2React.createElement和虛擬DOM

 

10.3.3事件處理

 

10.3.4條件渲染

 

10.3.5列表與Key

 

10.4元素渲染

 

10.4.1客戶端渲染

 

10.4.2服務器端渲染

 

10.5組件

 

10.5.1React元素與組件的區別

 

10.5.2創建組件

 

10.5.3組件的輸入接口

 

10.5.4組件的狀態

 

10.5.5組件中函數處理

 

10.5.6組件的生命周期

 

10.5.7組件的引用

 

10.6組件設計與優化

 

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簡單路由

 

10.8.4嵌套模式路由

 

10.8.5路由參數

 

10.8.6編程式路由導航

 

10.8.7多個Routes/

 

10.9狀態管理(Redux)

 

10.9.1Redux介紹

 

10.9.2Redux基本用法

 

10.9.3Redux核心對象

 

10.9.4Redux中間件介紹

 

10.9.5Redux中間件(reduxthunk)

 

10.9.6Redux中間件(reduxsaga)

 

10.9.7Redux Toolkit簡化Redux代碼

 

10.10狀態管理(Recoil)

 

10.10.1Recoil介紹

 

10.10.2Recoil核心概念

 

10.10.3Recoil核心API

 

10.11React移動端開發(React Native)

 

10.11.1React Native優點

 

10.11.2React Native安裝與配置

 

第11章React進階原理

 

11.1React源碼調試

 

11.1.1React源碼下載與編譯

 

11.1.2React源碼包介紹

 

11.2React架構原理

 

11.2.1React 15版架構 

 

11.2.2React 16版架構 

 

11.2.3React Scheduler實現

 

第12章React組件庫開發實戰

 

12.1React組件庫設計準備

 

12.1.1組件庫設計基本目標

 

12.1.2組件庫技術選型

 

12.2搭建React組件庫(MonoRepo)

 

12.2.1初始化Lerna項目

 

12.2.2創建React組件庫(Package)

 

12.2.3創建一個Button組件

 

12.2.4使用Rollup進行組件庫打包

 

12.3創建Playgrounds

 

12.4通過Jest搭建組件庫測試

 

12.4.1安裝配置測試框架

 

12.4.2編寫組件測試代碼

 

12.4.3啟動單元測試

 

12.5使用Storybook搭建組件文檔

 

12.6將組件庫發布到NPM

 

 

第4篇Flutter 2框架篇

 

 

第13章Flutter語法基礎

 

13.1Flutter介紹

 

13.2開發環境搭建

 

13.2.1Windows安裝配置Flutter SDK

 

13.2.2macOS安裝配置Flutter SDK

 

13.2.3配置VS Code開發Flutter

 

13.3第1個Flutter應用

 

13.3.1創建Flutter App項目

 

13.3.2編寫Flutter App界面

 

13.3.3添加交互邏輯

 

13.4組件

 

13.5包管理

 

13.5.1pubspec.yaml文件

 

13.5.2通過pub倉庫管理包

 

13.5.3以其他方式管理包

 

13.6資源管理

 

13.6.1圖片資源管理

 

13.6.2多像素密度的圖片管理

 

13.6.3字體資源的聲明

 

13.6.4原生平臺的資源設置

 

13.7組件設計風格

 

13.7.1Material(Android)風格組件

 

13.7.2Cupertino(iOS)風格組件

 

13.8尺寸單位與適配

 

13.9基礎組件

 

13.9.1基礎組件介紹

 

13.9.2構建佈局

 

13.9.3列表與可滾動組件

 

13.9.4表單組件

 

13.10路由管理

 

13.10.1路由的基礎用法

 

13.10.2路由傳值

 

13.10.3命名路由

 

13.10.4路由攔截

 

13.10.5嵌套模式路由

 

13.11事件處理與通知

 

13.11.1原始指針事件

 

13.11.2手勢識別

 

13.11.3全局事件總線

 

13.11.4事件通知

 

13.12網絡

 

13.12.1HttpClient

 

13.12.2HTTP庫

 

13.12.3Dio庫

 

13.12.4WebSocket

 

13.12.5Isolate

 

13.13狀態管理

 

13.13.1InheritedWidget

 

13.13.2scoped_model

 

13.14Stream與BLoC模式

 

13.14.1Stream

 

13.14.2RxDart

 

13.14.3BLoC模式

 

第14章Flutter Web和桌面應用

 

14.1Flutter Web介紹

 

14.1.1Flutter Web框架架構

 

14.1.2Flutter Web的兩種編譯器

 

14.1.3Flutter Web支持的兩種渲染模式

 

14.1.4創建一個Flutter Web項目

 

14.2Flutter Desktop介紹

 

14.3Flutter Desktop開發案例

 

第15章Flutter插件庫開發實戰

 

15.1Flutter插件庫開發介紹

 

15.2Flutter自定義組件庫的3種方式

 

15.3Flutter自定義插件(Plugin)

 

15.4在Pub上發布自己的Package