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

本書以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.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代碼命名技巧/
附錄本書涉及的部分官方網站和文檔的地址/