Vue 3 移動 Web 開發與性能調優實戰

《Vue3移動Web開發與性能調優實戰》旨在向讀者介紹如何使用Vue 3和其他現代Web技術創建高性能的移動Web應用程序。《Vue3移動Web開發與性能調優實戰》不僅詳細介紹有關移動Web和Vue 3的技術知識，包括HTML5、CSS3、Vue全家桶、構建工具Vite、移動Web屏幕適配等，並講解如何使用這些技術來創建快速、可靠和可擴展的應用程序，還深入探討各種性能優化技術，並向讀者展示如何使用這些技術來提升Web應用程序的性能、可靠性和用戶體驗。最後通過一個企業級實戰項目——仿微信朋友圈系統來全方位講解移動Web和Vue 3在企業級項目中的應用實踐。 《Vue3移動Web開發與性能調優實戰》既適合有一定前端開發基礎的學生、前端開發的從業者以及自由項目開發者，也適合對Vue 3感興趣的、擅於做各種Vue 3應用探索、想要深入瞭解Vue 3底層實現的開發者，還可作為高校相關專業的教學用書。

目    錄

 

第1章  移動Web開發概述 1

1.1  移動互聯網Web開發技術介紹 1

1.1.1  移動Web是什麽 1

1.1.2  Web網頁和原生App的區別 1

1.1.3  移動Web開發的特點 2

1.1.4  移動Web App是如何工作的 3

1.2  移動Web與HTML 5、CSS 3和Vue.js的關系 4

1.2.1  移動Web與HTML 5和CSS 3的關系 4

1.2.2  移動Web與Vue.js的關系 5

1.3  瀏覽器安裝和代碼環境的準備 5

1.3.1  安裝Chrome 5

1.3.2  安裝Node.js和http-server 5

1.3.3  選擇合適的代碼編輯器 7

1.4  小結 8

1.5  練習 8

第2章  HTML 5語義化標簽和屬性 9

2.1  DOCTYPE聲明 9

2.2  <header>標簽 10

2.3  <footer>標簽 11

2.4  <section>標簽 12

2.5  <nav>標簽 12

2.6  <aside>標簽 13

2.7  語義化標簽總結 14

2.8  HTML 5其他新增的標簽 15

2.8.1  <progress>標簽 15

2.8.2  <picture>標簽 16

2.8.3  <dialog>標簽 16

2.9  HTML 5新增的標簽屬性 18

2.9.1  <input>的type屬性 18

2.9.2  <input>文件上傳功能 19

2.9.3  <input>其他新增屬性 21

2.9.4  <script>的async和

defer屬性 22

2.10  小結 24

2.11  練習 24

第3章  HTML 5音頻和視頻 25

3.1  <audio>標簽與音頻 25

3.1.1  <audio>標簽的使用 25

3.1.2  使用JavaScript操作audio對象 26

3.1.3  audio對象的事件 27

3.2  <video>標簽與視頻 29

3.2.1  <video>標簽的使用 29

3.2.2  使用JavaScript操作

video對象 31

3.2.3  video對象的事件 31

3.2.4  videojs視頻播放器的使用 33

3.3  小結 36

3.4  練習 36

第4章  HTML 5網頁存儲 37

4.1  初識Web Storage 37

4.1.1  Web Storage的概念 37

4.1.2  同源策略 38

4.1.3  Web Storage的瀏覽器兼容性 38

4.2  LocalStorage和SessionStorage 38

4.2.1  LocalStorage的增刪改查 39

4.2.2  LocalStorage容量的限制 40

4.3  瀏覽器存儲的其他方案 41

4.3.1  IndexedDB 41

4.3.2  Service Worker 42

4.4  小結 42

4.5  練習 42

第5章  CSS 3選擇器 43

5.1  CSS 3屬性選擇器 43

5.2  CSS 3偽類選擇器 44

5.2.1  偽類和偽元素 45

5.2.2  子元素偽類選擇器 46

5.2.3  類型子元素偽類選擇器 47

5.2.4  條件偽類選擇器 48

5.2.5  元素狀態偽類選擇器 49

5.3  小結 50

5.4  練習 51

第6章  CSS 3轉換、過渡與動畫 52

6.1  CSS 3轉換 52

6.1.1  translate 52

6.1.2  scale 53

6.1.3  rotate 54

6.1.4  skew 55

6.1.5  matrix 56

6.1.6  transform-origin 57

6.1.7  3D轉換 59

6.1.8  瀏覽器前綴 63

6.2  CSS 3過渡 63

6.2.1  transition-property屬性 64

6.2.2  transition-duration屬性 65

6.2.3  transition-timing-function

屬性 65

6.2.4  transition-timing-delay屬性 67

6.2.5  過渡效果的特點和局限性 67

6.3  CSS 3動畫 67

6.3.1  keyframes 68

6.3.2  animation（動畫）屬性 69

6.3.3  will-change屬性 72

6.4  案例：CSS 3實現旋轉3D立方體 73

6.4.1  實現3D立方體 73

6.4.2  旋轉3D立方體 75

6.5  小結 77

6.6  練習 77

第7章  移動Web開發和調試 78

7.1  Chrome模擬器調試 78

7.1.1  啟用Device Mode功能 78

7.1.2  移動設備視區模式 79

7.1.3  模擬網絡狀態 80

7.2  spy-debugger調試 82

7.3  小結 85

7.4  練習 85

第8章  移動Web屏幕適配 86

8.1  視區簡介 86

8.1.1  物理像素和CSS像素 86

8.1.2  視區 88

8.1.3  設置視區 88

8.2  響應式佈局 90

8.2.1  媒體查詢 90

8.2.2  案例——響應式頁面 94

8.3  Flex佈局 98

8.3.1  Flex新舊版本的兼容性 98

8.3.2  Flex容器屬性 99

8.3.3  Flex子元素屬性 108

8.4  rem適配 114

8.4.1  動態設置根元素的font-size 114

8.4.2  計算rem數值 115

8.5  vw適配 117

8.6  rem適配和vw適配兼容性 118

8.7  小結 119

8.8  練習 120

第9章  移動Web單擊事件 121

9.1  touch事件 121

9.1.1  touch事件分類 121

9.1.2  touch事件對象 122

9.2  移動Web端單擊事件 124

9.2.1  iOS單擊延遲 125

9.2.2  “單擊穿透”問題 126

9.3  小結 127

9.4  練習 127

第10章  Vue.js基礎 128

10.1  Vue.js實例和組件 128

10.1.1  創建Vue.js實例 128

10.1.2  用component()方法創建組件 129

10.1.3  Vue組件、根組件、實例的區別 130

10.1.4  全局組件和局部組件 131

10.1.5  組件方法和事件的交互操作 132

10.1.6  單文件組件 133

10.2  Vue.js模板語法 136

10.2.1  插值表達式 136

10.2.2  指令 138

10.3  Vue.js的data屬性、方法、計算屬性和監聽器 147

10.3.1  data屬性 147

10.3.2  方法 148

10.3.3  計算屬性 149

10.3.4  計算屬性和方法 150

10.3.5  監聽器 153

10.3.6  監聽器和計算屬性 155

10.4  案例：Vue 3留言板 157

10.4.1  功能描述 157

10.4.2  案例完整代碼 157

10.5  小結 157

10.6  練習 157

第11章  Vue.js組件 158

11.1  組件生命周期 158

11.1.1  beforeCreate和created方法 160

11.1.2  beforeMount和mounted方法 161

11.1.3  beforeUpdate和updated方法 162

11.1.4  beforeUnmount和unmounted方法 164

11.1.5  errorCaptured 166

11.1.6  activated和deactivated 166

11.1.7  renderTracked和renderTriggered 167

11.2  組件通信 167

11.2.1  組件通信概述 167

11.2.2  父組件向子組件通信 169

11.2.3  子組件向父組件通信 172

11.2.4  父子組件的雙向數據綁定與自定義v-model 174

11.2.5  非父子關系組件的通信 176

11.2.6  provide/inject 179

11.3  組件插槽 181

11.3.1  默認插槽 181

11.3.2  具名插槽 182

11.3.3  動態插槽名 183

11.3.4  插槽後備 184

11.3.5  作用域插槽 185

11.3.6  解構插槽props 186

11.4  動態組件 187

11.5  異步組件和<suspense> 189

11.6  <teleport>組件 191

11.7  Mixin對象 192

11.7.1  Mixin合並 193

11.7.2  全局Mixin 195

11.7.3  Mixin的取捨 196

11.8  案例：Vue 3待辦事項 196

11.8.1  功能描述 196

11.8.2  案例完整代碼 197

11.9  小結 200

11.10  練習 200

第12章  Vue.js組合式API 201

12.1  組合式API基礎 201

12.2  setup方法 202

12.2.1  setup方法的參數 203

12.2.2  setup方法結合模板使用 204

12.2.3  setup方法的執行時機和getCurrentInstance方法 205

12.3  響應式類方法 205

12.3.1  ref和reactive 205

12.3.2  toRef和toRefs 207

12.3.3  其他響應式類方法 209

12.4  監聽類方法 211

12.4.1  computed方法 211

12.4.2  watchEffect方法 212

12.4.3  watch方法 213

12.5  生命周期類方法 215

12.6  methods方法 216

12.7  provide/inject 217

12.8  單文件組件<script setup> 219

12.9  案例：組合式API待辦事項 222

12.9.1  功能描述 222

12.9.2  案例完整代碼 222

12.10  小結 224

12.11  練習 224

第13章  Vue.js動畫 225

13.1  從一個簡單的動畫開始 225

13.2  <transition>組件實現過渡效果 227

13.3  <transition>組件實現動畫效果 229

13.4  <transition>組件同時實現過渡和動畫 230

13.5  <transition>組件的鉤子函數 232

13.6  多個元素或組件的過渡/動畫效果 233

13.7  列表數據的過渡效果 235

13.8  案例：魔幻的事項列表 237

13.8.1  功能描述 237

13.8.2  案例完整代碼 237

13.9  小結 238

13.10  練習 239

第14章  Vuex狀態管理 240

14.1  什麽是狀態管理模式 240

14.2  Vuex概述 241

14.2.1  Vuex的組成 241

14.2.2  安裝Vuex 242

14.2.3  一個簡單的store 243

14.3  state 244

14.4  getters 245

14.5  mutation 247

14.6  action 249

14.7  module 251

14.8  Vuex插件 255

14.9  在組合式API中使用Vuex 256

14.10  Vuex適用的場合 258

14.11  另一種狀態及管理方案——Pinia 258

14.12  案例：事項列表的數據通信 259

14.12.1  功能描述 259

14.12.2  案例完整代碼 259

14.13  小結 261

14.14  練習 261

第15章  Vue Router路由管理 262

15.1  什麽是單頁應用 262

15.2  Vue Router概述 263

15.2.1  安裝Vue Router 263

15.2.2  一個簡單的組件路由 263

15.3  動態路由 265

15.3.1  動態路由匹配 265

15.3.2  響應路由變化 266

15.4  導航守衛 267

15.4.1  全局前置守衛 267

15.4.2  全局解析守衛 268

15.4.3  全局後置鉤子 269

15.4.4  組件內的守衛 269

15.4.5  路由配置守衛 270

15.5  嵌套路由 271

15.6  命名視圖 273

15.7  命名路由 275

15.8  編程式導航 275

15.9  路由組件傳參 278

15.10  路由重定向、別名及元數據 279

15.10.1  路由重定向 279

15.10.2  路由別名 280

15.10.3  路由元數據 281

15.11  Vue Router的路由模式 282

15.12  滾動行為 283

15.13  keep-alive 284

15.13.1  keep-alive緩存狀態 284

15.13.2  利用元數據meta控制keep-alive 285

15.14  路由懶加載 288

15.15  在組合式API中使用Vue Router 288

15.16  案例：Vue Router路由待辦事項 290

15.16.1  功能描述 290

15.16.2  案例完整代碼 290

15.17  小結 291

15.18  練習 291

第16章  新一代開發構建工具Vite 292

16.1  Vite概述 292

16.1.1  開發環境和生產環境 292

16.1.2  Rollup 294

16.2  Vite的安裝和使用 294

16.2.1  初始化項目 294

16.2.2  啟動項目 295

16.2.3  熱更新 296

16.3  Vite自定義配置 296

16.3.1  靜態資源處理 297

16.3.2  插件配置 298

16.3.3  服務端渲染配置 299

16.4  小結 299

16.5  練習 299

 

第17章  移動Web性能優化 300

17.1  資源合並與壓縮優化 300

17.1.1  HTML文件壓縮 300

17.1.2  JavaScript和CSS文件壓縮 301

17.1.3  圖片文件壓縮 301

17.1.4  資源合並 302

17.1.5  Gzip壓縮 302

17.1.6  升級HTTP 2.0 302

17.1.7  圖片base64和Icon Font 304

17.2  瀏覽器加載原理優化 305

17.3  緩存優化 305

17.3.1  強緩存：Expires&Cache-Control 306

17.3.2  協商緩存：

Last-Modified&Etag 307

17.3.3  妙用LocalStorage 307

17.3.4  離線包機制 308

17.3.5  服務端渲染 309

17.4  懶加載與預加載 310

17.4.1  首屏資源加載優化 310

17.4.2  預加載 311

17.5  渲染優化 312

17.5.1  16ms優化 312

17.5.2  重繪和重排 313

17.5.3  requestAnimationFrame和requestIdleCallback 313

17.5.4  長列表滾動優化 314

17.5.5  合理使用GPU 314

17.6  小結 315

17.7  練習 315

第18章  實戰項目：微信朋友圈系統的開發 316

18.1  開發環境準備 316

18.1.1  安裝代碼編輯器

Sublime Text 3 316

18.1.2  安裝CNPM 317

18.1.3  Vite項目初始化 317

18.2  項目功能邏輯 319

18.3  登錄頁面的開發 319

18.3.1  引入WeUI 320

18.3.2  登錄頁面的組件 320

18.3.3  用戶信息設置在Vuex中 322

18.3.4  設置用戶token 323

18.4  發表頁面的開發 324

18.5  首頁的開發 326

18.5.1  導航欄 327

18.5.2  頂部模塊 328

18.5.3  列表組件 328

18.5.4  單條內容組件 330

18.5.5  圖片查看器組件 335

18.6  個人頁面的開發 335

18.6.1  “我的”頁面 335

18.6.2  用戶詳情頁面 337

18.7  路由配置 338

18.8  頁面轉場動畫 339

18.8.1  轉場動畫概述 339

18.8.2  監聽router 339

18.8.3  使用<transition>和Animate.css實現頁面切換動畫 340

18.9  項目小結 342