Vue.js 3編程藝術：構建企業級前端框架

目錄

第一篇基礎篇——固其根本

第1章Vue.js概述

1.1Vue.js簡介

1.2Vue.js主要特點

1.3Vue.js發展歷程

1.4Vue.js 3新特性

第2章Vue.js開發環境搭建

2.1Node.js

2.1.1Node.js概述

2.1.2Node.js安裝

2.2Npm

2.2.1設置鏡像

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目錄結構分析

2.7.2文件分析

本章小結

第3章Vue.js基礎

3.1MVVM模式

3.2數據綁定與插值

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監聽器選項

3.7.1默認懶執行

3.7.2立即執行

3.7.3深度監聽

3.7.4監聽對象中某個屬性

3.8事件處理

3.8.1鼠標事件

3.8.2鍵盤事件

3.8.3焦點事件

3.8.4表單事件

3.8.5滾動事件

3.8.6文本相關事件

3.8.7事件傳參

3.8.8事件修飾符

3.8.9按鍵修飾符

3.9類與樣式綁定

3.9.1類綁定

3.9.2綁定內聯樣式

3.10模板引用

3.11組件基礎

3.11.1定義與使用一個組件

3.11.2動態組件

本章小結

第二篇進階篇——浚其泉涌

第4章Vue.js進階

4.1組件通信

4.1.1父組件向子組件傳值

4.1.2子組件向父組件傳值

4.1.3父組件調用子組件的方法

4.1.4兄弟組件通信

4.1.5跨級組件通信

4.2插槽

4.2.1默認插槽

4.2.2具名插槽

4.2.3作用域插槽

4.2.4動態插槽名

4.3自定義指令

4.3.1指令鉤子

4.3.2鉤子參數

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

本章小結

第5章Vue.js內置組件

5.1Transition

5.1.1過渡的類名

5.1.2自定義過渡的類名

5.1.3CSS過渡

5.1.4CSS動畫

5.2TransitionGroup

5.3Teleport

5.3.1模態框

5.3.2禁用Teleport

5.3.3多個Teleport共享目標

5.4KeepAlive

5.4.1基本使用

5.4.2包含/排除

5.4.3最大緩存實例數

5.4.4緩存實例的生命周期

5.5Suspense

5.5.1異步setup()鉤子

5.5.2頂層await表達式

5.5.3異步組件

本章小結

第6章Vue Router

6.1路由的概念

6.2路由模式

6.3安裝

6.4基本使用

6.4.1新建頁面文件

6.4.2定義路由

6.4.3創建路由實例

6.4.4路由註冊

6.4.5定義路由出口

6.5聲明式、編程式導航

6.5.1聲明式導航

6.5.2編程式導航

6.6動態路由匹配

6.6.1基本使用

6.6.2響應路由參數的變化

6.7配置404頁面

6.8重定向 

6.9嵌套路由

6.10路由傳參

6.10.1query傳參

6.10.2動態路由匹配傳參

6.11導航守衛

6.11.1全局前置守衛

6.11.2路由獨享守衛

6.11.3組件內守衛

6.12路由元信息

6.13動態路由

本章小結

第7章Pinia

7.1Pinia的特點

7.2Pinia的使用

7.2.1安裝

7.2.2創建Pinia實例

7.2.3在main.js中引用

7.2.4創建store

7.2.5使用store

7.2.6異步actions

7.2.7store的相互引用

7.2.8路由鉤子中使用store

7.3數據持久化piniapluginpersistedstate

7.3.1安裝插件

7.3.2引用插件

7.3.3在store模塊中啟用持久化

7.3.4修改key值

7.3.5修改存儲位置

7.3.6自定義要持久化的字段

本章小結

第8章SCSS

8.1安裝

8.2嵌套規則

8.3變量

8.3.1變量$

8.3.2變量默認值!default

8.4混合指令

8.4.1不帶參數的混合指令

8.4.2帶參數的混合指令

8.4.3帶參數有默認值的混合指令

8.4.4帶有邏輯關系的混合指令@if和@else

8.5擴展/繼承指令@extend

8.6占位符%

8.7父選擇器&

8.8數據類型

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函數

8.12.1mapget($map,$key)

8.12.2mapmerge($map1,$map2)

8.13使用SCSS完成主題色切換

本章小結

第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數據類型

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聯合類型（|）

10.3.17類型別名（type）

10.3.18交叉類型（&）

10.3.19字面量類型

10.3.20類型斷言（as）

10.3.21類型推斷

10.4函數

10.4.1函數的定義

10.4.2函數表達式

10.4.3可選參數

10.4.4默認參數

10.4.5剩餘參數

10.4.6參數解構

10.4.7函數重載

10.5接口（interface）

10.5.1描述對象的結構

10.5.2可選屬性

10.5.3只讀屬性

10.5.4可索引的類型

10.5.5接口繼承

10.5.6接口合並

10.5.7接口導入/導出

10.5.8函數類型接口

10.6類

10.6.1類的定義

10.6.2訪問修飾符

10.6.3只讀屬性（readonly）

10.6.4靜態屬性/靜態方法

10.6.5繼承

10.6.6抽象類/抽象方法

10.7泛型

10.7.1泛型函數

10.7.2泛型類

10.7.3泛型接口

10.7.4泛型參數的默認類型

10.7.5多個類型參數

10.7.6泛型約束

10.7.7泛型類型別名

10.7.8泛型條件類型

10.7.9infer

10.8類型守衛

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內置工具類型

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事件類型

本章小結

第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設置區分大小寫

11.9提交到本地倉庫

11.9.1查看狀態

11.9.2添加單個文件

11.9.3添加多個文件

11.9.4創建提交

11.9.5查看提交歷史

11.10遠程倉庫GitHub

11.10.1註冊賬戶

11.10.2創建SSH Key

11.10.3設置 SSH Key

11.10.4新建遠程倉庫

11.10.5關聯遠程倉庫

11.10.6生成令牌

11.10.7推送至遠程倉庫

11.11分支

11.11.1分支的命名

11.11.2創建並切換分支

11.11.3切換分支

11.11.4查看本地所有分支

11.11.5查看遠程所有分支

11.11.6查看本地分支與遠程的關聯關系

11.11.7拉取遠程分支並創建本地分支

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強制更新

本章小結

第三篇實戰篇——躬踐其實

第12章Web端管理系統: 搭建企業級應用框架

12.1初始化項目

12.1.1Node版本要求

12.1.2VS Code插件安裝

12.1.3創建項目

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安裝相關插件

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創建Git倉庫

12.5.2安裝相關插件

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創建Pinia實例

12.8.3在main.js中註冊

12.8.4創建store

12.8.5使用store

12.9配置SCSS

12.9.1安裝SCSS

12.9.2配置全局SCSS樣式文件

12.10配置Element Plus

12.11配置環境變量

12.11.1新建環境變量文件

12.11.2定義環境變量

12.11.3定義變量ts類型

12.11.4使用變量

12.11.5在vite.config.ts中使用環境變量

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使用區別

12.14.1靜態資源處理

12.14.2組件自動化註冊

第13章Web端管理系統: 權限管理

13.1後端設計(使用Koa框架)

13.1.1搭建後端服務

13.1.2使用路由中間件

13.1.3處理跨域

13.2前端設計

13.2.1定義使用到的常量

13.2.2配置axios

13.2.3調整目錄結構

13.2.4調整路由

13.2.5路由權限設置

13.2.6接口權限設置

13.2.7菜單欄權限設置

13.2.8動態路由設置

13.2.9按鈕權限設置

本章小結

參考文獻