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按鈕權限設置

 

本章小結

 

參考文獻