前端工程化：基於Vue.js 3.0的設計與實踐

《前端工程化：基於Vue.js 3.0的設計與實踐》是2023年機械工業出版社出版的圖書。

基本介紹

• 中文名：前端工程化：基於Vue.js 3.0的設計與實踐
• 出版時間：2023年5月1日
• 出版社：機械工業出版社
• ISBN：9787111724773

內容簡介

本書以Vue.js的3.0版本為核心技術棧，圍繞“前端工程化”和TypeScript的知識點展開講解，根據筆者多年的前端開發和一線團隊管理經驗，將Vue 3的知識點按照工程師做項目的實施順序梳理成章，一步一步幫助讀者進行前端工程化和Vue 3的開發。從前端工程化開始到TypeScript語言的學習，再到使用TypeScript開發Vue 3項目，通過循序漸進的學習過程提升讀者在前端工程化領域的實戰能力。

本書大部分知識點都搭配了通俗易懂、可實現的代碼案例，讀者掃描封底的二維碼可獲得隨書附贈的原始碼等資源。本書適合計算機前端開發技術人員、前端技術團隊管理人員和相關專業的在校大學生閱讀。

圖書目錄

前言

第1章 前端工程化概述/

1.1傳統開發的弊端/

1.2工程化帶來的優勢/

1.2.1開發層面的優勢/

1.2.2團隊協作的優勢/

1.2.3求職競爭上的優勢/

1.3Vue.js與工程化/

1.3.1了解Vue.js與全新的3.0版本/

1.3.2Vue與工程化之間的關聯/

1.3.3選擇Vue入門工程化的理由/

1.4現代化的開發概念/

1.4.1MPA與SPA/

1.4.2CSR與SSR/

1.4.3Pre-Rendering與SSG/

1.4.4ISR與DPR/

1.5工程化不止於前端/

1.5.1服務端開發/

1.5.2App開發/

1.5.3桌面程式開發/

1.5.4套用腳本開發/

1.6實踐工程化的流程/

1.7工程化神器Node.js/

1.7.1Node.js/

1.7.2Runtime/

1.7.3Node和瀏覽器的區別/

1.8工程化的構建工具/

1.8.1為什麼要使用構建工具/

1.8.2Webpack/

1.8.3Vite/

1.8.4兩者的區別/

1.8.5開發環境和生產環境/

第2章 工程化的前期準備/

2.1命令行工具/

2.1.1Windows/

2.1.2macOS/

2.2安裝Node環境/

2.2.1下載和安裝Node/

2.2.2版本之間的區別/

2.3基礎的Node項目/

2.3.1初始化一個項目/

2.3.2了解package.json/

2.3.3項目名稱規則/

2.3.4語義化版本號管理/

2.3.5腳本命令的配置/

2.3.6Hello Node/

2.4學習模組化設計/

2.4.1模組化解決了什麼問題/

2.4.2如何實現模組化/

2.4.3用 CommonJS 設計模組/

2.4.4用 ES Module 設計模組/

2.5認識組件化設計/

2.5.1什麼是組件化/

2.5.2解決了什麼問題/

2.5.3如何實現組件化/

2.6依賴包和外掛程式/

2.6.1包/

2.6.2node_modules/

2.6.3包管理器/

2.6.4依賴包的管理/

2.6.5如何使用包/

2.7控制編譯代碼的兼容性/

2.7.1如何查詢兼容性/

2.7.2Babel的使用和配置/

第3章 快速上手TypeScript/

3.1為什麼需要類型系統/

3.2Hello TypeScript/

3.3常用的 TS 類型定義/

3.3.1原始數據類型/

3.3.2數組/

3.3.3對象（接口）/

3.3.4類/

3.3.5聯合類型/

3.3.6函式/

3.3.7任意值/

3.3.8npm 包/

3.3.9類型斷言/

3.3.10類型推論/

3.4如何編譯為 JavaScript 代碼/

3.4.1編譯單個檔案/

3.4.2編譯多個模組/

3.4.3修改編譯後的JavaScript版本/

3.4.4其他事項/

3.5了解 tsconfig.json/

第4章 腳手架的升級與配置/

4.1全新的 Vue 版本/

4.1.1使用 Vue 3/

4.1.2使用 Vue 2/

4.2Hello Vue 3/

4.3使用 Vite 創建項目/

4.3.1create-vite/

4.3.2create-vue/

4.3.3create-preset/

4.3.4管理項目配置/

4.4使用 @vue/cli 創建項目/

4.4.1CLI和Vite的區別/

4.4.2更新 CLI 腳手架/

4.4.3使用 CLI 創建 3.x 項目/

4.4.4管理項目配置/

4.5調整TypeScript Config/

4.6添加協作規範/

4.6.1Editor Config/

4.6.2Prettier/

4.6.3ESLint/

4.7安裝 VSCode/

4.8添加 VSCode 外掛程式/

4.8.1Chinese (Simplified)/

4.8.2Volar/

4.8.3Vue VSCode Snippets/

4.8.4Auto Close Tag/

4.8.5Auto Rename Tag/

4.8.6EditorConfig for VSCode/

4.8.7Prettier for VSCode/

4.8.8ESLint for VSCode/

4.8.9其他外掛程式/

4.9項目初始化/

4.9.1入口檔案/

4.9.2回顧 Vue 2的入口檔案/

4.9.3了解 Vue 3的入口檔案/

4.10Vue Devtools/

第5章 單組件的編寫/

5.1全新的 setup 函式/

5.1.1setup的含義/

5.1.2setup的參數使用/

5.1.3defineComponent的作用/

5.2組件的生命周期/

5.2.1升級變化/

5.2.2使用 3.x的生命周期/

5.3組件的基本寫法/

5.3.1回顧 Vue 2中組件的基本寫法/

5.3.2了解 Vue 3中組件的基本寫法/

5.4回響式數據的變化/

5.4.1設計上的變化/

5.4.2用法上的變化/

5.5回響式 API：ref/

5.5.1類型聲明/

5.5.2變數的定義/

5.5.3DOM 元素與子組件/

5.5.4變數的讀取與賦值/

5.6回響式 API：reactive/

5.6.1類型聲明與定義/

5.6.2變數的讀取與賦值/

5.6.3特別注意事項/

5.7回響式 API：toRef 與 toRefs/

5.7.1它們各自的作用/

5.7.2使用 toRef/

5.7.3使用 toRefs/

5.7.4為什麼要進行轉換/

5.7.5什麼場景下比較適合使用它們/

5.7.6在業務中的具體運用/

5.7.7需要注意的問題/

5.8函式的聲明和使用/

5.9數據的偵聽/

5.9.1watch/

5.9.2watchEffect/

5.9.3watchPostEffect/

5.9.4watchSyncEffect/

5.10數據的計算/

5.10.1用法變化/

5.10.2類型聲明/

5.10.3優勢對比和注意事項/

5.10.4setter的使用/

5.10.5套用場景/

5.11指令/

5.11.1內置指令/

5.11.2自定義指令/

5.12插槽/

5.12.1默認插槽/

5.12.2具名插槽/

5.12.3默認內容/

5.12.4注意事項/

5.13CSS 樣式與預處理器/

5.13.1編寫組件樣式表/

5.13.2動態綁定 CSS/

5.13.3樣式表的組件作用域/

5.13.4深度操作符/

5.13.5使用 CSS 預處理器/

第6章 路由的使用/

6.1路由的目錄結構/

6.2在項目里引入路由/

6.2.1回顧 Vue 2的路由/

6.2.2了解 Vue 3的路由/

6.3路由樹的配置/

6.3.1基礎格式/

6.3.2公共基礎路徑/

6.3.3一級路由/

6.3.4多級路由/

6.3.5路由懶載入/

6.4路由的渲染/

6.5使用 route 獲取路由信息/

6.6使用 router 操作路由/

6.7使用 router-link 標籤跳轉/

6.7.1基礎跳轉/

6.7.2帶參數的跳轉/

6.7.3不生成 a 標籤/

6.8在獨立TypeScript/JavaScript檔案里使用路由/

6.9路由元信息配置/

6.10路由重定向/

6.10.1基本用法/

6.10.2業務場景/

6.10.3配置為 path/

6.10.4配置為 route/

6.10.5配置為 function/

6.11路由別名配置/

6.12404 路由頁面配置/

6.13導航守衛/

6.13.1鉤子的套用場景/

6.13.2路由里的全局鉤子/

6.13.3在組件內使用全局鉤子/

6.13.4路由里的獨享鉤子/

6.13.5組件內單獨使用/

6.14路由偵聽/

6.14.1watch/

6.14.2watchEffect/

6.15部署問題與服務端配置/

6.15.1常見部署問題/

6.15.2服務端配置方案/

第7章 外掛程式的開發和使用/

7.1外掛程式的安裝和引入/

7.1.1通過 npm 安裝/

7.1.2通過 cnpm 安裝/

7.1.3通過 yarn 安裝/

7.1.4通過 pnpm 安裝/

7.1.5通過 CDN 安裝/

7.1.6外掛程式的引入/

7.2Vue 專屬外掛程式/

7.2.1全局外掛程式的使用/

7.2.2單組件外掛程式的使用/

7.3通用JavaScript/TypeScript外掛程式/

7.4本地外掛程式/

7.4.1封裝的目的/

7.4.2常用的本地封裝類型/

7.4.3開發本地通用JavaScript/TypeScript外掛程式/

7.4.4開發本地 Vue 專屬外掛程式/

7.5全局 API 掛載/

7.5.1回顧 Vue 2的全局API掛載/

7.5.2了解 Vue 3的全局API掛載/

7.5.3定義全局 API/

7.5.4全局 API的替代方案/

7.6npm 包的開發與發布/

7.6.1常用的構建工具/

7.6.2項目結構與入口檔案/

7.6.3開發 npm 包/

7.6.4生成 npm 包的類型聲明/

7.6.5添加說明文檔/

7.6.6發布 npm 包/

第8章 組件之間的通信/

8.1父子組件通信/

8.2props/emits/

8.2.1下發 props/

8.2.2接收 props/

8.2.3配置帶有類型限制的 props/

8.2.4配置可選以及帶有默認值的 props/

8.2.5使用 props/

8.2.6傳遞非 props的屬性/

8.2.7獲取非 props的屬性/

8.2.8綁定 emits/

8.2.9接收並調用 emits/

8.2.10接收 emits 時做一些校驗/

8.3v-model/emits/

8.3.1綁定 v-model/

8.3.2配置 emits/

8.4ref/emits/

8.4.1父組件操作子組件/

8.4.2子組件通知父組件/

8.5爺孫組件通信/

8.6provide/inject/

8.6.1發起 provide/

8.6.2接收 inject/

8.7兄弟組件通信/

8.8全局組件通信/

8.9EventBus/

8.9.1回顧 Vue 2的EventBus/

8.9.2了解 Vue 3的EventBus/

8.9.3創建 Vue 3的 EventBus/

8.9.4創建和移除偵聽事件/

8.9.5調用偵聽事件/

8.9.6舊項目升級 EventBus/

8.10Reactive State/

8.10.1創建狀態中心/

8.10.2設定狀態更新邏輯/

8.10.3觀察全局狀態變化/

8.11Vuex/

8.11.1在了解之前/

8.11.2Vuex的目錄結構/

8.11.3回顧Vue 2的Vuex/

8.11.4了解 Vue 3的Vuex/

8.11.5Vuex的配置/

8.12Pinia/

第9章 全局狀態管理/

9.1關於 Pinia/

9.2安裝和啟用/

9.3狀態樹的結構/

9.4創建 Store/

9.4.1形式1：接收兩個參數/

9.4.2形式2：接收一個參數/

9.5管理 state/

9.5.1給 Store 添加 state/

9.5.2手動指定數據類型/

9.5.3獲取和更新 state/

9.5.4批量更新 state/

9.5.5全量更新 state/

9.5.6重置 state/

9.5.7訂閱 state/

9.6管理 getters/

9.6.1給 Store 添加 getter/

9.6.2獲取和更新 getter/

9.7管理 actions/

9.7.1給 Store 添加 action/

9.7.2調用 action/

9.8添加多個 Store/

9.8.1目錄結構建議/

9.8.2在 Vue 組件/TypeScript檔案里使用/

9.8.3Store 之間互相引用/

9.9專屬外掛程式的使用/

9.9.1如何查找外掛程式/

9.9.2如何使用外掛程式/

第10章 高效開發/

10.1script-setup/

10.1.1新特性的產生背景/

10.1.2全局編譯器宏/

10.1.3template 操作簡化/

10.1.4props接收方式的變化/

10.1.5emits接收方式的變化/

10.1.6attrs接收方式的變化/

10.1.7slots接收方式的變化/

10.1.8ref通信方式的變化/

10.1.9頂級await的支持/

10.2命名技巧/

10.2.1檔案命名技巧/

10.2.2代碼命名技巧/

附錄 本書涉及的部分官方網站和文檔的地址/