Vue.js前端框架開發實戰

《Vue.js前端框架開發實戰》是2023年清華大學出版社出版的圖書，作者：張磊，宋潔，張建軍 主編；紀美侖，隋秀麗，王剛，喬富強，趙旭 副主編。

基本介紹

• 中文名：Vue.js前端框架開發實戰
• 作者：張磊，宋潔，張建軍 主編；紀美侖，隋秀麗，王剛，喬富強，趙旭 副主編
• 出版時間：2023年8月1日
• 出版社：清華大學出版社
• ISBN：9787302630449 
• 定價：59.90 元

內容簡介

本書通過套用示例和綜合案例對Vue.js 3.0的相關知識進行講解與演練，旨在使讀者快速掌握Vue.js的用法，並提高使用Vue開發網站、平台與App的實戰能力。本書分為11章，內容包括Vue核心設計思想、開發環境的搭建、Vue實例的創建、數據綁定、事件監聽操作、常用API、頁面渲染方法、過渡與動畫、Vue路由原理、動態路由的嵌套、Vuex狀態管理、Vue腳手架、伺服器端渲染，以及“微商城”項目實戰等。

圖書目錄

目錄

第1章統信UOS環境搭建1

1.1統信UOS概述2

1.1.1統信概述2

1.1.2功能列表3

1.1.3統信UOS套用商店6

1.2使用隨身碟安裝統信UOS7

1.2.1UOS鏡像的下載8

1.2.2安裝前準備8

1.2.3正式安裝（推薦全盤安裝）10

1.2.4啟動及激活16

1.3初識Vue.js18

1.3.1前端技術的發展18

1.3.2什麼是Vue.js19

1.4Vue開發環境安裝和配置21

1.4.1Vue下載和引入21

1.4.2Node.js安裝及環境配置22

1.4.3npm包管理工具25

1.4.4Vue入門程式——Hello Vue.js26

1.5使用WebStorm創建Vue項目28

1.6解讀Vue項目檔案目錄結構31

1.7綜合案例——實現簡單邏輯計算器32

本章小結34

經典面試題35

上機練習35

第2章Vue實例、數據綁定及指令36

2.1Vue實例37

2.1.1創建Vue實例37

2.1.2el參數37

2.1.3data數據對象38

2.1.4methods實例方法39

2.1.5computed屬性41

2.1.6watch狀態監聽43

2.2Vue數據綁定45

2.2.1屬性綁定46

2.2.2雙向數據綁定47

2.3Vue指令48

2.3.1vmodel49

2.3.2vtext52

2.3.3vhtml53

2.3.4vbind54

2.3.5von55

2.3.6vif57

2.3.7vshow59

2.3.8vfor62

2.4綜合案例——實現購物清單

功能65

本章小結66

經典面試題67

上機練習67

第3章Vue事件、組件及生命周期68

3.1Vue事件69

3.1.1事件監聽69

3.1.2事件修飾符703.1.3按鍵修飾符71

3.2Vue組件72

3.2.1什麼是組件72

3.2.2局部註冊組件73

3.2.3組件之間的數據傳遞75

3.2.4組件切換81

3.3Vue生命周期83

3.3.1鉤子函式83

3.3.2實例創建84

3.3.3頁面掛載85

3.3.4數據更新87

3.3.5實例銷毀89

本章小結92

經典面試題92

上機練習92

第4章Vue全局API及實例屬性93

4.1全局API94

4.1.1自定義全局指令94

4.1.2使用外掛程式95

4.1.3組件構造器97

4.1.4設定值98

4.1.5全局註冊混入100

4.2實例屬性101

4.2.1vm.$el102

4.2.2vm.$data103

4.2.3vm.$options104

4.2.4vm.$root105

4.2.5vm.$children106

4.2.6vm.$slots108

4.3全局配置110

4.3.1silent110

4.3.2devtools111

4.3.3productionTip112

4.4組件進階113

4.4.1mixins113

4.4.2render115

4.4.3createElement117

本章小結119

經典面試題119

上機練習119

第5章Vue過渡和動畫120

5.1過渡與動畫121

5.1.1了解過渡與動畫121

5.1.2transition組件121

5.2單元素/組件的過渡124

5.2.1使用@keyframes創建CSS動畫124

5.2.2animate.css結合transition實現動畫126

5.2.3鉤子函式實現動畫128

5.3多個元素的過渡130

5.3.1不同標籤名元素的過渡130

5.3.2相同標籤名元素的過渡132

5.4多個組件的過渡133

5.5列表過渡135

5.5.1什麼是列表過渡135

5.5.2列表的進入和離開過渡135

5.5.3列表的排序過渡138

本章小結140

經典面試題140

上機練習141

第6章Vue路由142

6.1初識路由143

6.1.1後端路由143

6.1.2前端路由143

6.2Vue Router144

6.2.1Vue Router的工作原理144

6.2.2Vue Router的安裝和使用145

6.2.3路由對象的屬性148

6.3動態路由148

6.3.1什麼是動態路由148

6.3.2query方式傳參149

6.3.3params方式傳參151

6.4嵌套路由153

6.4.1什麼是嵌套路由153

6.4.2嵌套路由案例154

6.5程式化導航157

6.5.1頁面導航的兩種方式157

6.5.2router.push（）157

6.5.3router.go（）160

6.6命名路由161

6.6.1什麼是命名路由161

6.6.2綜合案例161

6.7命名視圖163

6.7.1什麼是命名視圖163

6.7.2綜合案例163

本章小結166

經典面試題166

上機練習166

第7章Vuex狀態管理167

7.1初識Vuex168

7.1.1什麼是Vuex168

7.1.2狀態管理模式169

7.1.3Vuex的下載和安裝170

7.2核心概念172

7.2.1state172

7.2.2getters175

7.2.3mutations177

7.2.4actions178

7.2.5module180

7.3Vuex中的API185

7.3.1模組註冊185

7.3.2狀態替換186

7.4綜合案例——實現購物車功能187

7.4.1案例分析187

7.4.2代碼實現188

本章小結196

經典面試題196

上機練習196

第8章Vue CLI（Vue腳手架）197

8.1初識Vue CLI198

8.1.1安裝前的注意事項 198

8.1.2全局安裝@vue/CLI 198

8.1.3使用vue create命令創建項目 198

8.1.4使用GUI創建項目200

8.2外掛程式204

8.2.1CLI外掛程式204

8.2.2安裝外掛程式204

8.3CLI服務和配置檔案205

8.3.1CLI服務205

8.3.2配置檔案207

8.3.3配置多頁套用209

8.4環境變數和模式212

8.4.1環境變數212

8.4.2模式213

8.5靜態資源管理214

8.5.1相對路徑引入靜態資源214

8.5.2public目錄引入靜態資源215

8.6綜合案例——使用Vue CLI快速創建Vue項目215

8.6.1項目配置215

8.6.2安裝外掛程式218

本章小結220

經典面試題220

上機練習221

第9章伺服器端渲染222

9.1初識伺服器端渲染223

9.1.1客戶端渲染與伺服器端渲染的區別223

9.1.2伺服器端渲染的注意事項224

9.2伺服器端渲染的簡單實現224

9.2.1創建vuessr項目224

9.2.2渲染Vue實例225

9.2.3Express搭建SSR …225

9.2.4Koa搭建SSR227

9.3webpack搭建伺服器端渲染229

9.3.1基本流程229

9.3.2項目搭建229

9.4Nuxt.js伺服器端渲染框架234

9.4.1創建Nuxt.js項目 …234

9.4.2頁面和路由236

9.4.3頁面跳轉237

9.5綜合案例——通過Node.js+Express實現Web伺服器端渲染238

本章小結241

經典面試題241

上機練習241

第10章信創靜態資源伺服器242

10.1Tengine伺服器基礎243

10.1.1Tengine概述243

10.1.2Tengine下載及安裝244

10.2靜態資源伺服器基本概念245

10.2.1Tengine伺服器的基本架構及工作特點245

10.2.2Tengine基礎概念 246

10.3Tengine伺服器的部署251

10.3.1Tengine平台初始化251

10.3.2Tengine主配置檔案說明254

本章小結256

經典面試題256

上機練習256

第11章綜合項目——構建電商後台管理系統257

11.1開發準備258

11.1.1項目展示258

11.1.2技術方案259

11.1.3項目開發流程260

11.2項目搭建260

11.2.1使用vite構建Vue3項目260

11.2.2配置Element Plus 261

11.2.3配置路由262

11.2.4配置ElementPlus圖示264

11.2.5引入less265

11.2.6配置vuex265

11.2.7配置mock.js266

11.2.8二次封裝axios 268

11.2.9目錄結構272

11.3頁面的布局結構273

11.3.1頂部標籤欄273

11.3.2左側選單欄275

11.3.3tag標籤276

11.3.4模組頁面區279

11.3.5頁面結構組合效果280

11.4登錄頁面281

11.4.1動態路由的實現281

11.4.2登錄退出功能的實現281

11.4.3路由守衛的實現282

11.5首頁283

11.5.1用戶信息283

11.5.2數據展示284

11.5.3折線圖（Echart表格）286

11.5.4柱狀圖（Echart表格）289

11.5.5餅狀圖（Echart表格）291

11.6用戶管理292

11.6.1獲取用戶數據292

11.6.2用戶的分頁實現295

11.6.3用戶數據的增刪改查296

本章小結303

經典面試題304