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

《大前端三劍客——Vue+React+Flutter》是2022年清華大學出版社出版的圖書，作者是徐禮文。

基本介紹

• 中文名：大前端三劍客——Vue+React+Flutter
• 作者：徐禮文
• 出版時間：2022年11月1日
• 出版社：清華大學出版社
• ISBN：9787302614746
• 定價：209 元

內容簡介

隨著移動互聯時代到萬物互聯超級終端時代的變化，開發者也從移動互聯開發轉型到萬物互聯時代的超級終端開發，本書全面講解大前端時代的核心技術棧和核心開發語言，並通過一本書融匯貫通，本書是普通前端開發者通向大前端架構師的橋樑，本書中涉及大量案例和企業一線實踐操作經驗，是前端開發者轉型為大前端架構師的必備書籍。

本書共4篇15個章。第一篇為基礎篇（第1~6章），主要介紹大前端的發展趨勢，大前端的基礎開發語言(ES6、TypeScript、Dart)，大前端構建工具和前端工程化體系，以及大前端的包管理和如何搭建一個企業級的腳手架工具。從第二篇至第四篇（第7~15章），分別介紹Vue 3、React和Flutter 2三大主流框架，幫助開發者學習和掌握**的框架用法和生態體系。

學習本書內容，需要具備一定的HTML、CSS、JS基礎知識，本書可以作為前端開發者提升技能的工具書也可以作為普通開發者從網頁開發過渡到萬物互聯開發的書籍。

圖書目錄

第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