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

第一篇基礎(chǔ)篇——固其根本
第1章Vue.js概述
1.1Vue.js簡介
1.2Vue.js主要特點
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擴展
2.6Vite
2.6.1Vite特點
2.6.2Vite熱更新
2.6.3搭建第一個Vue項目
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表達式綁定
3.3方法選項
3.4選項式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計算屬性選項
3.7監(jiān)聽器選項
3.7.1默認懶執(zhí)行
3.7.2立即執(zhí)行
3.7.3深度監(jiān)聽
3.7.4監(jiān)聽對象中某個屬性
3.8事件處理
3.8.1鼠標事件
3.8.2鍵盤事件
3.8.3焦點事件
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é)
第二篇進階篇——浚其泉涌
第4章Vue.js進階
4.1組件通信
4.1.1父組件向子組件傳值
4.1.2子組件向父組件傳值
4.1.3父組件調(diào)用子組件的方法
4.1.4兄弟組件通信
4.1.5跨級組件通信
4.2插槽
4.2.1默認插槽
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共享目標
5.4KeepAlive
5.4.1基本使用
5.4.2包含/排除
5.4.3最大緩存實例數(shù)
5.4.4緩存實例的生命周期
5.5Suspense
5.5.1異步setup()鉤子
5.5.2頂層await表達式
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)建路由實例
6.4.4路由注冊
6.4.5定義路由出口
6.5聲明式、編程式導航
6.5.1聲明式導航
6.5.2編程式導航
6.6動態(tài)路由匹配
6.6.1基本使用
6.6.2響應路由參數(shù)的變化
6.7配置404頁面
6.8重定向 
6.9嵌套路由
6.10路由傳參
6.10.1query傳參
6.10.2動態(tài)路由匹配傳參
6.11導航守衛(wèi)
6.11.1全局前置守衛(wèi)
6.11.2路由獨享守衛(wèi)
6.11.3組件內(nèi)守衛(wèi)
6.12路由元信息
6.13動態(tài)路由
本章小結(jié)
第7章Pinia
7.1Pinia的特點
7.2Pinia的使用
7.2.1安裝
7.2.2創(chuàng)建Pinia實例
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變量默認值!default
8.4混合指令
8.4.1不帶參數(shù)的混合指令
8.4.2帶參數(shù)的混合指令
8.4.3帶參數(shù)有默認值的混合指令
8.4.4帶有邏輯關(guān)系的混合指令@if和@else
8.5擴展/繼承指令@extend
8.6占位符%
8.7父選擇器&
8.8數(shù)據(jù)類型
8.9運算
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的特點
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ù)表達式
10.4.3可選參數(shù)
10.4.4默認參數(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接口導入/導出
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ù)的默認類型
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自定義類型保護
10.9類型查詢
10.9.1typeof 
10.9.2keyof
10.10實用技巧
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搭建項目
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遠程倉庫GitHub
11.10.1注冊賬戶
11.10.2創(chuàng)建SSH Key
11.10.3設(shè)置 SSH Key
11.10.4新建遠程倉庫
11.10.5關(guān)聯(lián)遠程倉庫
11.10.6生成令牌
11.10.7推送至遠程倉庫
11.11分支
11.11.1分支的命名
11.11.2創(chuàng)建并切換分支
11.11.3切換分支
11.11.4查看本地所有分支
11.11.5查看遠程所有分支
11.11.6查看本地分支與遠程的關(guān)聯(lián)關(guān)系
11.11.7拉取遠程分支并創(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從遠程倉庫拉到本地倉庫
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打標簽
11.17強制更新
本章小結(jié)
第三篇實戰(zhàn)篇——躬踐其實
第12章Web端管理系統(tǒng): 搭建企業(yè)級應用框架
12.1初始化項目
12.1.1Node版本要求
12.1.2VS Code插件安裝
12.1.3創(chuàng)建項目
12.1.4安裝項目依賴
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實例
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實例
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è)計(使用Koa框架)
13.1.1搭建后端服務(wù)
13.1.2使用路由中間件
13.1.3處理跨域
13.2前端設(shè)計
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é)
參考文獻