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

第一篇基礎(chǔ)篇——固其根本
第1章Vue.js概述
1.1Vue.js簡介
1.2Vue.js主要特點(diǎn)
1.3Vue.js發(fā)展歷程
1.4Vue.js 3新特性
第2章Vue.js開發(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搭建第一個Vue項(xiàng)目
2.7分析第一個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)聽器選項(xiàng)
3.7.1默認(rèn)懶執(zhí)行
3.7.2立即執(zhí)行
3.7.3深度監(jiān)聽
3.7.4監(jiān)聽對象中某個屬性
3.8事件處理
3.8.1鼠標(biāo)事件
3.8.2鍵盤事件
3.8.3焦點(diǎn)事件
3.8.4表單事件
3.8.5滾動事件
3.8.6文本相關(guān)事件
3.8.7事件傳參
3.8.8事件修飾符
3.8.9按鍵修飾符
3.9類與樣式綁定
3.9.1類綁定
3.9.2綁定內(nèi)聯(lián)樣式
3.10模板引用
3.11組件基礎(chǔ)
3.11.1定義與使用一個組件
3.11.2動態(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跨級組件通信
4.2插槽
4.2.1默認(rèn)插槽
4.2.2具名插槽
4.2.3作用域插槽
4.2.4動態(tài)插槽名
4.3自定義指令
4.3.1指令鉤子
4.3.2鉤子參數(shù)
4.3.3對象字面量
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依賴注入
4.5.18script setup
4.6高級指令
4.6.1vpre
4.6.2vonce
4.6.3vmemo
本章小結(jié)
第5章Vue.js內(nèi)置組件
5.1Transition
5.1.1過渡的類名
5.1.2自定義過渡的類名
5.1.3CSS過渡
5.1.4CSS動畫
5.2TransitionGroup
5.3Teleport
5.3.1模態(tài)框
5.3.2禁用Teleport
5.3.3多個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新建頁面文件
6.4.2定義路由
6.4.3創(chuàng)建路由實(shí)例
6.4.4路由注冊
6.4.5定義路由出口
6.5聲明式、編程式導(dǎo)航
6.5.1聲明式導(dǎo)航
6.5.2編程式導(dǎo)航
6.6動態(tài)路由匹配
6.6.1基本使用
6.6.2響應(yīng)路由參數(shù)的變化
6.7配置404頁面
6.8重定向 
6.9嵌套路由
6.10路由傳參
6.10.1query傳參
6.10.2動態(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動態(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修改存儲位置
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ù)類型
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ù)類型
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和{}類型
10.3.13enum
10.3.14void
10.3.15never
10.3.16聯(lián)合類型（|）
10.3.17類型別名（type）
10.3.18交叉類型（&）
10.3.19字面量類型
10.3.20類型斷言（as）
10.3.21類型推斷
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描述對象的結(jié)構(gòu)
10.5.2可選屬性
10.5.3只讀屬性
10.5.4可索引的類型
10.5.5接口繼承
10.5.6接口合并
10.5.7接口導(dǎo)入/導(dǎo)出
10.5.8函數(shù)類型接口
10.6類
10.6.1類的定義
10.6.2訪問修飾符
10.6.3只讀屬性（readonly）
10.6.4靜態(tài)屬性/靜態(tài)方法
10.6.5繼承
10.6.6抽象類/抽象方法
10.7泛型
10.7.1泛型函數(shù)
10.7.2泛型類
10.7.3泛型接口
10.7.4泛型參數(shù)的默認(rèn)類型
10.7.5多個類型參數(shù)
10.7.6泛型約束
10.7.7泛型類型別名
10.7.8泛型條件類型
10.7.9infer
10.8類型守衛(wèi)
10.8.1in
10.8.2typeof 
10.8.3instanceof
10.8.4自定義類型保護(hù)
10.9類型查詢
10.9.1typeof 
10.9.2keyof
10.10實(shí)用技巧
10.10.1非空斷言（!）
10.10.2類型斷言（as）
10.10.3可選鏈操作符（?.）
10.11內(nè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事件類型
本章小結(jié)
第11章Git
11.1Git安裝
11.2Git GUI
11.3Git Bash
11.4Git History
11.5GitLens—Git supercharged
11.6配置Git賬戶
11.7建立Git倉庫
11.8設(shè)置區(qū)分大小寫
11.9提交到本地倉庫
11.9.1查看狀態(tài)
11.9.2添加單個文件
11.9.3添加多個文件
11.9.4創(chuàng)建提交
11.9.5查看提交歷史
11.10遠(yuǎn)程倉庫GitHub
11.10.1注冊賬戶
11.10.2創(chuàng)建SSH Key
11.10.3設(shè)置 SSH Key
11.10.4新建遠(yuǎn)程倉庫
11.10.5關(guān)聯(lián)遠(yuǎn)程倉庫
11.10.6生成令牌
11.10.7推送至遠(yuǎn)程倉庫
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合并多個commit
11.13撤銷修改
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)程倉庫拉到本地倉庫
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è)級應(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)目依賴
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倉庫
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自動格式化
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中注冊
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類型
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接口類型
12.12.4定義請求接口
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組件自動化注冊
第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動態(tài)路由設(shè)置
13.2.9按鈕權(quán)限設(shè)置
本章小結(jié)
參考文獻(xiàn)