Vue.js前端框架開發實戰

本書通過應用示例和綜合案例對Vue.js 3.0的相關知識進行講解與演練，旨在使讀者快速掌握Vue.js的用法，並提高使用Vue開發網站、平臺與App的實戰能力。本書分為11章，內容包括Vue核心設計思想、開發環境的搭建、Vue實例的創建、數據綁定、事件監聽操作、常用API、頁面渲染方法、過渡與動畫、Vue路由原理、動態路由的嵌套、Vuex狀態管理、Vue腳手架、服務器端渲染，以及“微商城”項目實戰等。 本書內容豐富，理論與實踐相結合，提供配套示例源代碼、教學課件和教學視頻等資源，可作為高等院校相關專業的教材，也可作為Web前端開發初學者、移動網站與App設計開發人員的參考讀物。

目錄

 

 

第1章統信UOS環境搭建1

1.1統信UOS概述2

1.1.1統信概述2

1.1.2功能列表3

1.1.3統信UOS應用商店6

1.2使用U盤安裝統信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