Vue.js 3編程藝術(shù)：構(gòu)建企業(yè)級(jí)前端框架

第一篇基礎(chǔ)篇——固其根本
第1章Vue.js概述
1.1Vue.js簡(jiǎn)介
1.2Vue.js主要特點(diǎn)
1.3Vue.js發(fā)展歷程
1.4Vue.js 3新特性
第2章Vue.js開(kāi)發(fā)環(huán)境搭建
2.1Node.js
2.1.1Node.js概述
2.1.2Node.js安裝
2.2Npm
2.2.1設(shè)置鏡像
2.2.2Npm常用命令
2.3Yarn
2.3.1安裝Yarn
2.3.2Yarn常用命令
2.4Pnpm
2.4.1安裝Pnpm
2.4.2Pnpm常用命令
2.4.3Npm、Yarn和Pnpm的選擇
2.5Visual Studio Code
2.5.1安裝VS Code
2.5.2安裝VS Code擴(kuò)展
2.6Vite
2.6.1Vite特點(diǎn)
2.6.2Vite熱更新
2.6.3搭建第一個(gè)Vue項(xiàng)目
2.7分析第一個(gè)Vue.js程序
2.7.1目錄結(jié)構(gòu)分析
2.7.2文件分析
本章小結(jié)
第3章Vue.js基礎(chǔ)
3.1MVVM模式
3.2數(shù)據(jù)綁定與插值
3.2.1文本綁定
3.2.2HTML代碼綁定
3.2.3屬性綁定
3.2.4JavaScript表達(dá)式綁定
3.3方法選項(xiàng)
3.4選項(xiàng)式API生命周期
3.5基本指令
3.5.1vtext
3.5.2vhtml
3.5.3vbind
3.5.4von
3.5.5vshow
3.5.6vif
3.5.7velse
3.5.8velseif
3.5.9vfor
3.5.10vmodel
3.6計(jì)算屬性選項(xiàng)
3.7監(jiān)聽(tīng)器選項(xiàng)
3.7.1默認(rèn)懶執(zhí)行
3.7.2立即執(zhí)行
3.7.3深度監(jiān)聽(tīng)
3.7.4監(jiān)聽(tīng)對(duì)象中某個(gè)屬性
3.8事件處理
3.8.1鼠標(biāo)事件
3.8.2鍵盤(pán)事件
3.8.3焦點(diǎn)事件
3.8.4表單事件
3.8.5滾動(dòng)事件
3.8.6文本相關(guān)事件
3.8.7事件傳參
3.8.8事件修飾符
3.8.9按鍵修飾符
3.9類(lèi)與樣式綁定
3.9.1類(lèi)綁定
3.9.2綁定內(nèi)聯(lián)樣式
3.10模板引用
3.11組件基礎(chǔ)
3.11.1定義與使用一個(gè)組件
3.11.2動(dòng)態(tài)組件
本章小結(jié)
第二篇進(jìn)階篇——浚其泉涌
第4章Vue.js進(jìn)階
4.1組件通信
4.1.1父組件向子組件傳值
4.1.2子組件向父組件傳值
4.1.3父組件調(diào)用子組件的方法
4.1.4兄弟組件通信
4.1.5跨級(jí)組件通信
4.2插槽
4.2.1默認(rèn)插槽
4.2.2具名插槽
4.2.3作用域插槽
4.2.4動(dòng)態(tài)插槽名
4.3自定義指令
4.3.1指令鉤子
4.3.2鉤子參數(shù)
4.3.3對(duì)象字面量
4.4異步組件
4.5組合式API
4.5.1setup
4.5.2ref
4.5.3reactive
4.5.4computed
4.5.5watchEffect
4.5.6watch
4.5.7toRef
4.5.8toRefs
4.5.9isRef
4.5.10isReactive
4.5.11shallowRef
4.5.12shallowReactive
4.5.13readonly
4.5.14customRef
4.5.15markRaw
4.5.16組合式API生命周期
4.5.17組合式API依賴(lài)注入
4.5.18script setup
4.6高級(jí)指令
4.6.1vpre
4.6.2vonce
4.6.3vmemo
本章小結(jié)
第5章Vue.js內(nèi)置組件
5.1Transition
5.1.1過(guò)渡的類(lèi)名
5.1.2自定義過(guò)渡的類(lèi)名
5.1.3CSS過(guò)渡
5.1.4CSS動(dòng)畫(huà)
5.2TransitionGroup
5.3Teleport
5.3.1模態(tài)框
5.3.2禁用Teleport
5.3.3多個(gè)Teleport共享目標(biāo)
5.4KeepAlive
5.4.1基本使用
5.4.2包含/排除
5.4.3最大緩存實(shí)例數(shù)
5.4.4緩存實(shí)例的生命周期
5.5Suspense
5.5.1異步setup()鉤子
5.5.2頂層await表達(dá)式
5.5.3異步組件
本章小結(jié)
第6章Vue Router
6.1路由的概念
6.2路由模式
6.3安裝
6.4基本使用
6.4.1新建頁(yè)面文件
6.4.2定義路由
6.4.3創(chuàng)建路由實(shí)例
6.4.4路由注冊(cè)
6.4.5定義路由出口
6.5聲明式、編程式導(dǎo)航
6.5.1聲明式導(dǎo)航
6.5.2編程式導(dǎo)航
6.6動(dòng)態(tài)路由匹配
6.6.1基本使用
6.6.2響應(yīng)路由參數(shù)的變化
6.7配置404頁(yè)面
6.8重定向 
6.9嵌套路由
6.10路由傳參
6.10.1query傳參
6.10.2動(dòng)態(tài)路由匹配傳參
6.11導(dǎo)航守衛(wèi)
6.11.1全局前置守衛(wèi)
6.11.2路由獨(dú)享守衛(wèi)
6.11.3組件內(nèi)守衛(wèi)
6.12路由元信息
6.13動(dòng)態(tài)路由
本章小結(jié)
第7章Pinia
7.1Pinia的特點(diǎn)
7.2Pinia的使用
7.2.1安裝
7.2.2創(chuàng)建Pinia實(shí)例
7.2.3在main.js中引用
7.2.4創(chuàng)建store
7.2.5使用store
7.2.6異步actions
7.2.7store的相互引用
7.2.8路由鉤子中使用store
7.3數(shù)據(jù)持久化piniapluginpersistedstate
7.3.1安裝插件
7.3.2引用插件
7.3.3在store模塊中啟用持久化
7.3.4修改key值
7.3.5修改存儲(chǔ)位置
7.3.6自定義要持久化的字段
本章小結(jié)
第8章SCSS
8.1安裝
8.2嵌套規(guī)則
8.3變量
8.3.1變量$
8.3.2變量默認(rèn)值!default
8.4混合指令
8.4.1不帶參數(shù)的混合指令
8.4.2帶參數(shù)的混合指令
8.4.3帶參數(shù)有默認(rèn)值的混合指令
8.4.4帶有邏輯關(guān)系的混合指令@if和@else
8.5擴(kuò)展/繼承指令@extend
8.6占位符%
8.7父選擇器&
8.8數(shù)據(jù)類(lèi)型
8.9運(yùn)算
8.10插值#{}
8.11指令
8.11.1@if、@else if和@else
8.11.2@for
8.11.3@while
8.11.4@each
8.11.5@import
8.11.6@debug
8.11.7@content
8.11.8@function和@return
8.12SCSS函數(shù)
8.12.1mapget($map,$key)
8.12.2mapmerge($map1,$map2)
8.13使用SCSS完成主題色切換
本章小結(jié)
第9章Element Plus
9.1Element Plus的特點(diǎn)
9.2Element Plus的安裝
9.3完整引入
9.4按需引入
9.5常用組件
9.5.1Button按鈕
9.5.2Input輸入框
9.5.3Form表單
9.5.4Select選擇器
9.5.5Table表格
第10章TypeScript 
10.1TypeScript概述
10.2TypeScript的安裝和編譯
10.3TypeScript數(shù)據(jù)類(lèi)型
10.3.1number
10.3.2string
10.3.3boolean
10.3.4null
10.3.5undefined
10.3.6symbol
10.3.7BigInt
10.3.8any
10.3.9unknown
10.3.10Array
10.3.11Tuple
10.3.12object、Object和{}類(lèi)型
10.3.13enum
10.3.14void
10.3.15never
10.3.16聯(lián)合類(lèi)型（|）
10.3.17類(lèi)型別名（type）
10.3.18交叉類(lèi)型（&）
10.3.19字面量類(lèi)型
10.3.20類(lèi)型斷言（as）
10.3.21類(lèi)型推斷
10.4函數(shù)
10.4.1函數(shù)的定義
10.4.2函數(shù)表達(dá)式
10.4.3可選參數(shù)
10.4.4默認(rèn)參數(shù)
10.4.5剩余參數(shù)
10.4.6參數(shù)解構(gòu)
10.4.7函數(shù)重載
10.5接口（interface）
10.5.1描述對(duì)象的結(jié)構(gòu)
10.5.2可選屬性
10.5.3只讀屬性
10.5.4可索引的類(lèi)型
10.5.5接口繼承
10.5.6接口合并
10.5.7接口導(dǎo)入/導(dǎo)出
10.5.8函數(shù)類(lèi)型接口
10.6類(lèi)
10.6.1類(lèi)的定義
10.6.2訪問(wèn)修飾符
10.6.3只讀屬性（readonly）
10.6.4靜態(tài)屬性/靜態(tài)方法
10.6.5繼承
10.6.6抽象類(lèi)/抽象方法
10.7泛型
10.7.1泛型函數(shù)
10.7.2泛型類(lèi)
10.7.3泛型接口
10.7.4泛型參數(shù)的默認(rèn)類(lèi)型
10.7.5多個(gè)類(lèi)型參數(shù)
10.7.6泛型約束
10.7.7泛型類(lèi)型別名
10.7.8泛型條件類(lèi)型
10.7.9infer
10.8類(lèi)型守衛(wèi)
10.8.1in
10.8.2typeof 
10.8.3instanceof
10.8.4自定義類(lèi)型保護(hù)
10.9類(lèi)型查詢(xún)
10.9.1typeof 
10.9.2keyof
10.10實(shí)用技巧
10.10.1非空斷言（!）
10.10.2類(lèi)型斷言（as）
10.10.3可選鏈操作符（?.）
10.11內(nèi)置工具類(lèi)型
10.11.1PartialT
10.11.2RequiredT
10.11.3ReadonlyT
10.11.4PickT,K
10.11.5OmitT,K
10.11.6RecordT,K
10.11.7ExcludeT,U
10.11.8ExtractT,U
10.11.9ReturnTypeT
10.11.10ParametersT
10.11.11NonNullableT
10.12Vue.js 3中TypeScript的使用
10.12.1搭建項(xiàng)目
10.12.2script setup lang="ts"
10.12.3ref
10.12.4reactive
10.12.5computed
10.12.6defineProps
10.12.7defineEmits
10.12.8defineSlots
10.12.9provide/inject
10.12.10事件類(lèi)型
本章小結(jié)
第11章Git
11.1Git安裝
11.2Git GUI
11.3Git Bash
11.4Git History
11.5GitLens—Git supercharged
11.6配置Git賬戶
11.7建立Git倉(cāng)庫(kù)
11.8設(shè)置區(qū)分大小寫(xiě)
11.9提交到本地倉(cāng)庫(kù)
11.9.1查看狀態(tài)
11.9.2添加單個(gè)文件
11.9.3添加多個(gè)文件
11.9.4創(chuàng)建提交
11.9.5查看提交歷史
11.10遠(yuǎn)程倉(cāng)庫(kù)GitHub
11.10.1注冊(cè)賬戶
11.10.2創(chuàng)建SSH Key
11.10.3設(shè)置 SSH Key
11.10.4新建遠(yuǎn)程倉(cāng)庫(kù)
11.10.5關(guān)聯(lián)遠(yuǎn)程倉(cāng)庫(kù)
11.10.6生成令牌
11.10.7推送至遠(yuǎn)程倉(cāng)庫(kù)
11.11分支
11.11.1分支的命名
11.11.2創(chuàng)建并切換分支
11.11.3切換分支
11.11.4查看本地所有分支
11.11.5查看遠(yuǎn)程所有分支
11.11.6查看本地分支與遠(yuǎn)程的關(guān)聯(lián)關(guān)系
11.11.7拉取遠(yuǎn)程分支并創(chuàng)建本地分支
11.11.8刪除分支
11.12操作commit
11.12.1提交commit
11.12.2修改commit提交信息
11.12.3合并多個(gè)commit
11.13撤銷(xiāo)修改
11.13.1git reset hard
11.13.2git reset soft
11.13.3git revert
11.13.4git checkout  file
11.13.5git reset HEAD file
11.14從遠(yuǎn)程倉(cāng)庫(kù)拉到本地倉(cāng)庫(kù)
11.14.1git clone
11.14.2git pull
11.14.3git fetch
11.15合并分支
11.15.1git merge
11.15.2git cherrypick
11.16打標(biāo)簽
11.17強(qiáng)制更新
本章小結(jié)
第三篇實(shí)戰(zhàn)篇——躬踐其實(shí)
第12章Web端管理系統(tǒng): 搭建企業(yè)級(jí)應(yīng)用框架
12.1初始化項(xiàng)目
12.1.1Node版本要求
12.1.2VS Code插件安裝
12.1.3創(chuàng)建項(xiàng)目
12.1.4安裝項(xiàng)目依賴(lài)
12.2配置TypeScript檢查
12.2.1修改tsconfig.json
12.2.2修改tsconfig.node.json
12.2.3新建typings.d.ts
12.2.4修改package.json
12.3配置路徑別名
12.3.1安裝@types/node
12.3.2配置vite.config.ts
12.3.3TypeScript路徑映射
12.4配置ESLint和Prettier
12.4.1安裝相關(guān)插件
12.4.2新建.eslintrc
12.4.3新建.eslintignore
12.4.4新建.prettierrc
12.4.5新建.prettierignore
12.4.6重啟VS Code使配置生效
12.4.7配置package.json
12.5配置husky、lintstaged、@commitlint/cli
12.5.1創(chuàng)建Git倉(cāng)庫(kù)
12.5.2安裝相關(guān)插件
12.5.3配置husky
12.5.4修改package.json
12.5.5新建commitlint.config.cjs
12.5.6提交
12.6VS Code自動(dòng)格式化
12.7配置路由
12.7.1安裝路由
12.7.2路由的基本使用
12.8配置Pinia
12.8.1安裝Pinia
12.8.2創(chuàng)建Pinia實(shí)例
12.8.3在main.js中注冊(cè)
12.8.4創(chuàng)建store
12.8.5使用store
12.9配置SCSS
12.9.1安裝SCSS
12.9.2配置全局SCSS樣式文件
12.10配置Element Plus
12.11配置環(huán)境變量
12.11.1新建環(huán)境變量文件
12.11.2定義環(huán)境變量
12.11.3定義變量ts類(lèi)型
12.11.4使用變量
12.11.5在vite.config.ts中使用環(huán)境變量
12.12配置axios
12.12.1安裝axios
12.12.2新建axios實(shí)例
12.12.3接口類(lèi)型
12.12.4定義請(qǐng)求接口
12.12.5使用接口
12.13打包配置
12.13.1分包
12.13.2生成gz文件
12.13.3js和css文件夾分離
12.14Vite與Webpack使用區(qū)別
12.14.1靜態(tài)資源處理
12.14.2組件自動(dòng)化注冊(cè)
第13章Web端管理系統(tǒng): 權(quán)限管理
13.1后端設(shè)計(jì)(使用Koa框架)
13.1.1搭建后端服務(wù)
13.1.2使用路由中間件
13.1.3處理跨域
13.2前端設(shè)計(jì)
13.2.1定義使用到的常量
13.2.2配置axios
13.2.3調(diào)整目錄結(jié)構(gòu)
13.2.4調(diào)整路由
13.2.5路由權(quán)限設(shè)置
13.2.6接口權(quán)限設(shè)置
13.2.7菜單欄權(quán)限設(shè)置
13.2.8動(dòng)態(tài)路由設(shè)置
13.2.9按鈕權(quán)限設(shè)置
本章小結(jié)
參考文獻(xiàn)