鏈接：https://pan.baidu.com/s/1c7voAy9Cu61hgT9oRK8lIA?pwd=3tp2?

提取碼：3tp2

本書(shū)作者為前端領(lǐng)域資深工程師，以工程化的視角闡述前端開(kāi)發(fā)過(guò)程，內(nèi)容翔實(shí)豐富，具有很強(qiáng)的指導(dǎo)意義。

內(nèi)容簡(jiǎn)介

本書(shū)以Vue.js的3.0版本為核心技術(shù)棧，圍繞“前端工程化”和TypeScript的知識(shí)點(diǎn)展開(kāi)講解，根據(jù)筆者多年的前端開(kāi)發(fā)和一線團(tuán)隊(duì)管理經(jīng)驗(yàn)，將Vue 3的知識(shí)點(diǎn)按照工程師做項(xiàng)目的實(shí)施順序梳理成章，一步一步幫助讀者進(jìn)行前端工程化和Vue 3的開(kāi)發(fā)。從前端工程化開(kāi)始到TypeScript語(yǔ)言的學(xué)習(xí)，再到使用TypeScript開(kāi)發(fā)Vue 3項(xiàng)目，通過(guò)循序漸進(jìn)的學(xué)習(xí)過(guò)程提升讀者在前端工程化領(lǐng)域的實(shí)戰(zhàn)能力。
本書(shū)大部分知識(shí)點(diǎn)都搭配了通俗易懂、可實(shí)現(xiàn)的代碼案例，讀者掃描封底的二維碼可獲得隨書(shū)附贈(zèng)的源代碼等資源。本書(shū)適合計(jì)算機(jī)前端開(kāi)發(fā)技術(shù)人員、前端技術(shù)團(tuán)隊(duì)管理人員和相關(guān)專(zhuān)業(yè)的在校大學(xué)生閱讀。

作者簡(jiǎn)介

程沛權(quán)，養(yǎng)了三只貓的程序員，熱愛(ài)烹飪、設(shè)計(jì)和音樂(lè)。在前端領(lǐng)域有多年的開(kāi)發(fā)經(jīng)驗(yàn)和一線開(kāi)發(fā)團(tuán)隊(duì)管理經(jīng)驗(yàn)，曾在網(wǎng)易和UC工作超過(guò)7年，在網(wǎng)易工作期間擔(dān)任內(nèi)訓(xùn)講師，有過(guò)近百篇的項(xiàng)目經(jīng)驗(yàn)與教程分享，開(kāi)展過(guò)多次跨部門(mén)業(yè)務(wù)培訓(xùn)課，為多個(gè)團(tuán)隊(duì)新成員帶來(lái)有效的快速成長(zhǎng)。

精彩書(shū)評(píng)

網(wǎng)易游戲社區(qū)原前端負(fù)責(zé)人 黃通

本書(shū)系統(tǒng)地介紹了前端工程化開(kāi)發(fā)中的各種技術(shù)，并以流行框架 Vue.js 3.0 作為技術(shù)棧，從知識(shí)講解到實(shí)踐運(yùn)用，再到實(shí)際問(wèn)題的解決，引導(dǎo)讀者掌握基于 Vue.js 3.0 的前端開(kāi)發(fā)技術(shù)。

紅迅軟件研發(fā)經(jīng)理 朱偉聰

本書(shū)從 0 到 1 ，帶你從前端工程化的基礎(chǔ)概念到動(dòng)手實(shí)操，再到流行框架 Vue.js 全新 3.0 版本的學(xué)習(xí)，不但可以學(xué)習(xí)框架的知識(shí)，更能明白在哪用、怎么用，可以說(shuō)是前端同學(xué)的必備案邊讀物。

順豐科技前產(chǎn)品經(jīng)理、中國(guó)設(shè)計(jì)智造大獎(jiǎng)獲得者、獨(dú)立開(kāi)發(fā)者 吳庸

本書(shū)清晰地介紹了前端工程化的發(fā)展變化，以及從基礎(chǔ)的入門(mén)到框架的實(shí)踐，還對(duì)當(dāng)下流行的技術(shù)棧組合進(jìn)行了科普和運(yùn)用場(chǎng)景分析，不僅適合前端工程師閱讀，對(duì)于產(chǎn)品經(jīng)理來(lái)說(shuō)，也是值得一看的。產(chǎn)品經(jīng)理了解前端技術(shù)發(fā)展帶來(lái)的優(yōu)勢(shì)，設(shè)計(jì)的產(chǎn)品會(huì)更有競(jìng)爭(zhēng)力。

目錄

前言
第1章 前端工程化概述/
1.1傳統(tǒng)開(kāi)發(fā)的弊端/
1.2工程化帶來(lái)的優(yōu)勢(shì)/
1.2.1開(kāi)發(fā)層面的優(yōu)勢(shì)/
1.2.2團(tuán)隊(duì)協(xié)作的優(yōu)勢(shì)/
1.2.3求職競(jìng)爭(zhēng)上的優(yōu)勢(shì)/
1.3Vue.js與工程化/
1.3.1了解Vue.js與全新的3.0版本/
1.3.2Vue與工程化之間的關(guān)聯(lián)/
1.3.3選擇Vue入門(mén)工程化的理由/
1.4現(xiàn)代化的開(kāi)發(fā)概念/
1.4.1MPA與SPA/
1.4.2CSR與SSR/
1.4.3Pre-Rendering與SSG/
1.4.4ISR與DPR/
1.5工程化不止于前端/
1.5.1服務(wù)端開(kāi)發(fā)/
1.5.2App開(kāi)發(fā)/
1.5.3桌面程序開(kāi)發(fā)/
1.5.4應(yīng)用腳本開(kāi)發(fā)/
1.6實(shí)踐工程化的流程/
1.7工程化神器Node.js/
1.7.1Node.js/
1.7.2Runtime/
1.7.3Node和瀏覽器的區(qū)別/
1.8工程化的構(gòu)建工具/
1.8.1為什么要使用構(gòu)建工具/
1.8.2Webpack/
1.8.3Vite/
1.8.4兩者的區(qū)別/
1.8.5開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境/
第2章 工程化的前期準(zhǔn)備/
2.1命令行工具/
2.1.1Windows/
2.1.2macOS/
2.2安裝Node環(huán)境/
2.2.1下載和安裝Node/
2.2.2版本之間的區(qū)別/
2.3基礎(chǔ)的Node項(xiàng)目/
2.3.1初始化一個(gè)項(xiàng)目/
2.3.2了解package.json/
2.3.3項(xiàng)目名稱(chēng)規(guī)則/
2.3.4語(yǔ)義化版本號(hào)管理/
2.3.5腳本命令的配置/
2.3.6Hello Node/
2.4學(xué)習(xí)模塊化設(shè)計(jì)/
2.4.1模塊化解決了什么問(wèn)題/
2.4.2如何實(shí)現(xiàn)模塊化/
2.4.3用 CommonJS 設(shè)計(jì)模塊/
2.4.4用 ES Module 設(shè)計(jì)模塊/
2.5認(rèn)識(shí)組件化設(shè)計(jì)/
2.5.1什么是組件化/
2.5.2解決了什么問(wèn)題/
2.5.3如何實(shí)現(xiàn)組件化/
2.6依賴(lài)包和插件/
2.6.1包/
2.6.2node_modules/
2.6.3包管理器/
2.6.4依賴(lài)包的管理/
2.6.5如何使用包/
2.7控制編譯代碼的兼容性/
2.7.1如何查詢兼容性/
2.7.2Babel的使用和配置/
第3章 快速上手TypeScript/
3.1為什么需要類(lèi)型系統(tǒng)/
3.2Hello TypeScript/
3.3常用的 TS 類(lèi)型定義/
3.3.1原始數(shù)據(jù)類(lèi)型/
3.3.2數(shù)組/
3.3.3對(duì)象（接口）/
3.3.4類(lèi)/
3.3.5聯(lián)合類(lèi)型/
3.3.6函數(shù)/
3.3.7任意值/
3.3.8npm 包/
3.3.9類(lèi)型斷言/
3.3.10類(lèi)型推論/
3.4如何編譯為 JavaScript 代碼/
3.4.1編譯單個(gè)文件/
3.4.2編譯多個(gè)模塊/
3.4.3修改編譯后的JavaScript版本/
3.4.4其他事項(xiàng)/
3.5了解 tsconfig.json/
第4章 腳手架的升級(jí)與配置/
4.1全新的 Vue 版本/
4.1.1使用 Vue 3/
4.1.2使用 Vue 2/
4.2Hello Vue 3/
4.3使用 Vite 創(chuàng)建項(xiàng)目/
4.3.1create-vite/
4.3.2create-vue/
4.3.3create-preset/
4.3.4管理項(xiàng)目配置/
4.4使用 @vue/cli 創(chuàng)建項(xiàng)目/
4.4.1CLI和Vite的區(qū)別/
4.4.2更新 CLI 腳手架/
4.4.3使用 CLI 創(chuàng)建 3.x 項(xiàng)目/
4.4.4管理項(xiàng)目配置/
4.5調(diào)整TypeScript Config/
4.6添加協(xié)作規(guī)范/
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項(xiàng)目初始化/
4.9.1入口文件/
4.9.2回顧 Vue 2的入口文件/
4.9.3了解 Vue 3的入口文件/
4.10Vue Devtools/
第5章 單組件的編寫(xiě)/
5.1全新的 setup 函數(shù)/
5.1.1setup的含義/
5.1.2setup的參數(shù)使用/
5.1.3defineComponent的作用/
5.2組件的生命周期/
5.2.1升級(jí)變化/
5.2.2使用 3.x的生命周期/
5.3組件的基本寫(xiě)法/
5.3.1回顧 Vue 2中組件的基本寫(xiě)法/
5.3.2了解 Vue 3中組件的基本寫(xiě)法/
5.4響應(yīng)式數(shù)據(jù)的變化/
5.4.1設(shè)計(jì)上的變化/
5.4.2用法上的變化/
5.5響應(yīng)式 API：ref/
5.5.1類(lèi)型聲明/
5.5.2變量的定義/
5.5.3DOM 元素與子組件/
5.5.4變量的讀取與賦值/
5.6響應(yīng)式 API：reactive/
5.6.1類(lèi)型聲明與定義/
5.6.2變量的讀取與賦值/
5.6.3特別注意事項(xiàng)/
5.7響應(yīng)式 API：toRef 與 toRefs/
5.7.1它們各自的作用/
5.7.2使用 toRef/
5.7.3使用 toRefs/
5.7.4為什么要進(jìn)行轉(zhuǎn)換/
5.7.5什么場(chǎng)景下比較適合使用它們/
5.7.6在業(yè)務(wù)中的具體運(yùn)用/
5.7.7需要注意的問(wèn)題/
5.8函數(shù)的聲明和使用/
5.9數(shù)據(jù)的偵聽(tīng)/
5.9.1watch/
5.9.2watchEffect/
5.9.3watchPostEffect/
5.9.4watchSyncEffect/
5.10數(shù)據(jù)的計(jì)算/
5.10.1用法變化/
5.10.2類(lèi)型聲明/
5.10.3優(yōu)勢(shì)對(duì)比和注意事項(xiàng)/
5.10.4setter的使用/
5.10.5應(yīng)用場(chǎng)景/
5.11指令/
5.11.1內(nèi)置指令/
5.11.2自定義指令/
5.12插槽/
5.12.1默認(rèn)插槽/
5.12.2具名插槽/
5.12.3默認(rèn)內(nèi)容/
5.12.4注意事項(xiàng)/
5.13CSS 樣式與預(yù)處理器/
5.13.1編寫(xiě)組件樣式表/
5.13.2動(dòng)態(tài)綁定 CSS/
5.13.3樣式表的組件作用域/
5.13.4深度操作符/
5.13.5使用 CSS 預(yù)處理器/
第6章 路由的使用/
6.1路由的目錄結(jié)構(gòu)/
6.2在項(xiàng)目里引入路由/
6.2.1回顧 Vue 2的路由/
6.2.2了解 Vue 3的路由/
6.3路由樹(shù)的配置/
6.3.1基礎(chǔ)格式/
6.3.2公共基礎(chǔ)路徑/
6.3.3一級(jí)路由/
6.3.4多級(jí)路由/
6.3.5路由懶加載/
6.4路由的渲染/
6.5使用 route 獲取路由信息/
6.6使用 router 操作路由/
6.7使用 router-link 標(biāo)簽跳轉(zhuǎn)/
6.7.1基礎(chǔ)跳轉(zhuǎn)/
6.7.2帶參數(shù)的跳轉(zhuǎn)/
6.7.3不生成 a 標(biāo)簽/
6.8在獨(dú)立TypeScript/JavaScript文件里使用路由/
6.9路由元信息配置/
6.10路由重定向/
6.10.1基本用法/
6.10.2業(yè)務(wù)場(chǎng)景/
6.10.3配置為 path/
6.10.4配置為 route/
6.10.5配置為 function/
6.11路由別名配置/
6.12404 路由頁(yè)面配置/
6.13導(dǎo)航守衛(wèi)/
6.13.1鉤子的應(yīng)用場(chǎng)景/
6.13.2路由里的全局鉤子/
6.13.3在組件內(nèi)使用全局鉤子/
6.13.4路由里的獨(dú)享鉤子/
6.13.5組件內(nèi)單獨(dú)使用/
6.14路由偵聽(tīng)/
6.14.1watch/
6.14.2watchEffect/
6.15部署問(wèn)題與服務(wù)端配置/
6.15.1常見(jiàn)部署問(wèn)題/
6.15.2服務(wù)端配置方案/
第7章 插件的開(kāi)發(fā)和使用/
7.1插件的安裝和引入/
7.1.1通過(guò) npm 安裝/
7.1.2通過(guò) cnpm 安裝/
7.1.3通過(guò) yarn 安裝/
7.1.4通過(guò) pnpm 安裝/
7.1.5通過(guò) CDN 安裝/
7.1.6插件的引入/
7.2Vue 專(zhuān)屬插件/
7.2.1全局插件的使用/
7.2.2單組件插件的使用/
7.3通用JavaScript/TypeScript插件/
7.4本地插件/
7.4.1封裝的目的/
7.4.2常用的本地封裝類(lèi)型/
7.4.3開(kāi)發(fā)本地通用JavaScript/TypeScript插件/
7.4.4開(kāi)發(fā)本地 Vue 專(zhuān)屬插件/
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 包的開(kāi)發(fā)與發(fā)布/
7.6.1常用的構(gòu)建工具/
7.6.2項(xiàng)目結(jié)構(gòu)與入口文件/
7.6.3開(kāi)發(fā) npm 包/
7.6.4生成 npm 包的類(lèi)型聲明/
7.6.5添加說(shuō)明文檔/
7.6.6發(fā)布 npm 包/
第8章 組件之間的通信/
8.1父子組件通信/
8.2props/emits/
8.2.1下發(fā) props/
8.2.2接收 props/
8.2.3配置帶有類(lèi)型限制的 props/
8.2.4配置可選以及帶有默認(rèn)值的 props/
8.2.5使用 props/
8.2.6傳遞非 props的屬性/
8.2.7獲取非 props的屬性/
8.2.8綁定 emits/
8.2.9接收并調(diào)用 emits/
8.2.10接收 emits 時(shí)做一些校驗(yàn)/
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發(fā)起 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創(chuàng)建 Vue 3的 EventBus/
8.9.4創(chuàng)建和移除偵聽(tīng)事件/
8.9.5調(diào)用偵聽(tīng)事件/
8.9.6舊項(xiàng)目升級(jí) EventBus/
8.10Reactive State/
8.10.1創(chuàng)建狀態(tài)中心/
8.10.2設(shè)定狀態(tài)更新邏輯/
8.10.3觀察全局狀態(tài)變化/
8.11Vuex/
8.11.1在了解之前/
8.11.2Vuex的目錄結(jié)構(gòu)/
8.11.3回顧Vue 2的Vuex/
8.11.4了解 Vue 3的Vuex/
8.11.5Vuex的配置/
8.12Pinia/
第9章 全局狀態(tài)管理/
9.1關(guān)于 Pinia/
9.2安裝和啟用/
9.3狀態(tài)樹(shù)的結(jié)構(gòu)/
9.4創(chuàng)建 Store/
9.4.1形式1：接收兩個(gè)參數(shù)/
9.4.2形式2：接收一個(gè)參數(shù)/
9.5管理 state/
9.5.1給 Store 添加 state/
9.5.2手動(dòng)指定數(shù)據(jù)類(lèi)型/
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調(diào)用 action/
9.8添加多個(gè) Store/
9.8.1目錄結(jié)構(gòu)建議/
9.8.2在 Vue 組件/TypeScript文件里使用/
9.8.3Store 之間互相引用/
9.9專(zhuān)屬插件的使用/
9.9.1如何查找插件/
9.9.2如何使用插件/
第10章 高效開(kāi)發(fā)/
10.1script-setup/
10.1.1新特性的產(chǎn)生背景/
10.1.2全局編譯器宏/
10.1.3template 操作簡(jiǎn)化/
10.1.4props接收方式的變化/
10.1.5emits接收方式的變化/
10.1.6attrs接收方式的變化/
10.1.7slots接收方式的變化/
10.1.8ref通信方式的變化/
10.1.9頂級(jí)await的支持/
10.2命名技巧/
10.2.1文件命名技巧/
10.2.2代碼命名技巧/
附錄 本書(shū)涉及的部分官方網(wǎng)站和文檔的地址/

查看全部↓

前言/序言

Vue 3.0從2020年9月中旬正式發(fā)布到2022年2月代替Vue 2成為Vue的默認(rèn)版本。經(jīng)過(guò)長(zhǎng)達(dá)一年半的市場(chǎng)驗(yàn)證，已經(jīng)證明了它可以完美地支持常見(jiàn)的企業(yè)需求，適合投產(chǎn)使用，未來(lái)會(huì)被越來(lái)越多的企業(yè)所采用，只掌握Vue 2遠(yuǎn)遠(yuǎn)不能滿足企業(yè)的技能要求。
本書(shū)以Vue.js的3.0版本為核心技術(shù)棧，圍繞“前端工程化”和TypeScript的知識(shí)點(diǎn)展開(kāi)講解，主要內(nèi)容如下：
1）如何進(jìn)行前端工程化開(kāi)發(fā)，掌握Node.js和npm的使用。
2）前端領(lǐng)域多年來(lái)受歡迎趨勢(shì)走高、帶有類(lèi)型支持的TypeScript 語(yǔ)言。
3）上手主流前端框架Vue.js的全新版本，并且在遇到常見(jiàn)問(wèn)題時(shí)知道如何解決。