Nuxt.js Web開發(fā)實戰(zhàn)

第1部分  第1個Nuxt應(yīng)用程序
第1章  Nuxt簡介 3
1.1  從Vue到Nuxt 3
1.2  為何使用Nuxt 4
1.2.1  編寫單文件組件 4
1.2.2  編寫ES2015 6
1.2.3  利用預(yù)處理器編寫CSS 6
1.2.4  利用模塊和插件擴(kuò)展Nuxt 7
1.2.5  在路由之間添加過渡 8
1.2.6  管理元素 9
1.2.7  利用webpack打包和劃分代碼 9
1.3  應(yīng)用程序的類型 11
1.3.1  傳統(tǒng)的服務(wù)器端渲染的應(yīng)用程序 11
1.3.2  傳統(tǒng)的單頁應(yīng)用程序（SPA） 12
1.3.3  通用服務(wù)器端渲染的應(yīng)用程序（SSR） 14
1.3.4  靜態(tài)生成的應(yīng)用程序 15
1.4  作為通用SSR應(yīng)用程序的Nuxt 16
1.5  作為靜態(tài)站點生成器的Nuxt 17
1.6  作為單頁應(yīng)用程序的Nuxt 17
1.7  本章小結(jié) 18
第2章  開始Nuxt之旅 19
2.1  技術(shù)需求 19
2.2  安裝Nuxt 20
2.2.1  使用create-nuxt-app 20
2.2.2  從頭開始安裝 22
2.3  了解目錄結(jié)構(gòu) 22
2.3.1  /assets/目錄 23
2.3.2  /static/目錄 24
2.3.3  /pages/目錄 24
2.3.4  /layouts/目錄 24
2.3.5  /components/目錄 24
2.3.6  /plugins/目錄 25
2.3.7  /store/目錄 26
2.3.8  /middleware/目錄 26
2.3.9  package.json文件 26
2.3.10  nuxt.config.js文件 27
2.3.11  別名 27
2.4  了解自定義配置 28
2.4.1  mode選項 29
2.4.2  target選項 29
2.4.3  head選項 29
2.4.4  css選項 30
2.4.5  plugins選項 31
2.4.6  components選項 31
2.4.7  buildModules選項 31
2.4.8  modules選項 31
2.4.9  build選項 32
2.4.10  dev選項 33
2.4.11  rootDir選項 34
2.4.12  srcDir選項 34
2.4.13  server選項 35
2.4.14  env選項 36
2.4.15  router選項 37
2.4.16  dir選項 38
2.4.17  loading選項 39
2.4.18  pageTransition和layoutTransition選項 39
2.4.19  generate選項 40
2.5  了解數(shù)據(jù)資源服務(wù)機(jī)制 41
2.6  本章小結(jié) 44
第3章  添加UI框架 45
3.1  添加Foundation和Motion UI 45
3.1.1  利用Foundation創(chuàng)建網(wǎng)格布局和站點導(dǎo)航 47
3.1.2  使用Foundation中的JavaScript實用程序和插件 49
3.1.3  利用Motion UI創(chuàng)建CSS動畫和過渡 52
3.1.4  利用Foundation Icon Fonts 3添加圖標(biāo) 55
3.2  添加Less（Leaner Style Sheets） 56
3.3  添加jQuery UI 59
3.4  添加AOS 62
3.5  添加Swiper 64
3.6  本章小結(jié) 67
第2部分  視圖、路由、組件、插件和模塊
第4章  添加視圖、路由和過渡效果 71
4.1  創(chuàng)建自定義路由 71
4.1.1  Vue Router 71
4.1.2  安裝Vue Router 72
4.1.3  利用Vue Router創(chuàng)建路由 72
4.1.4  創(chuàng)建基本的路由 74
4.1.5  創(chuàng)建動態(tài)路由 75
4.1.6  創(chuàng)建嵌套路由 76
4.1.7  創(chuàng)建動態(tài)嵌套路由 82
4.1.8  驗證路由參數(shù) 84
4.1.9  利用_.vue文件處理未知的路由 85
4.2  創(chuàng)建自定義視圖 87
4.2.1  理解Nuxt視圖 87
4.2.2  自定義應(yīng)用程序模板 88
4.2.3  創(chuàng)建自定義HTML頭 89
4.2.4  創(chuàng)建自定義布局 94
4.2.5  創(chuàng)建自定義頁面 97
4.2.6  理解頁面 97
4.3  創(chuàng)建自定義轉(zhuǎn)換 106
4.3.1  理解Vue中的轉(zhuǎn)換 106
4.3.2  利用pageTransition實現(xiàn)轉(zhuǎn)換 108
4.3.3  利用layoutTransition屬性實現(xiàn)轉(zhuǎn)換 111
4.3.4  利用CSS動畫實現(xiàn)轉(zhuǎn)換 113
4.3.5  利用JavaScript鉤子實現(xiàn)轉(zhuǎn)換 114
4.3.6  理解轉(zhuǎn)換模式 119
4.4  本章小結(jié) 120
第5章  添加Vue組件 121
5.1  了解Vue組件 121
5.1.1  什么是組件 123
5.1.2  利用props向子組件傳遞數(shù)據(jù) 123
5.1.3  監(jiān)聽子組件事件 126
5.1.4  利用v-mode創(chuàng)建自定義輸入組件 128
5.1.5  v-for循環(huán)中的key屬性 131
5.1.6  利用key屬性控制可復(fù)用的元素 135
5.2  創(chuàng)建單文件Vue組件 136
5.2.1  利用webpack編譯單文件組件 137
5.2.2  在單文件組件中傳遞數(shù)據(jù)和監(jiān)聽事件 139
5.2.3  在Nuxt中添加Vue組件 143
5.3  注冊全局和本地組件 147
5.3.1  在Vue中注冊全局組件 147
5.3.2  在Vue/Nuxt中注冊本地組件 148
5.3.3  在Nuxt中注冊全局組件 150
5.4  編寫基本和全局混入 152
5.4.1  創(chuàng)建基本的混入/非全局混入 153
5.4.2  創(chuàng)建全局混入 155
5.5  定義組件名并使用命名規(guī)則 156
5.5.1  多個單詞構(gòu)成的組件名稱 156
5.5.2  組件數(shù)據(jù) 157
5.5.3  props定義 158
5.5.4  組件文件 158
5.5.5  單文件組件文件名大小寫 159
5.5.6  自閉合組件 159
5.6  本章小結(jié) 160
第6章  編寫插件和模塊 161
6.1  編寫Vue插件 161
6.1.1  在Vue中編寫自定義插件 162
6.1.2  將Vue插件導(dǎo)入Nuxt中 165
6.1.3  在缺少SSR支持的情況下導(dǎo)入外部Vue插件 166
6.2  在Nuxt中編寫全局函數(shù) 167
6.2.1  將函數(shù)注入Vue實例中 168
6.2.2  將函數(shù)注入Nuxt上下文中 169
6.2.3  將函數(shù)注入Vue實例和Nuxt上下文中 170
6.2.4  僅注入客戶端或服務(wù)器端插件 172
6.3  編寫Nuxt模塊 174
6.4  編寫異步Nuxt模塊 180
6.4.1  使用async/await 180
6.4.2  返回一個Promise 181
6.5  編寫Nuxt模塊片段 182
6.5.1  使用頂級選項 182
6.5.2  使用addPlugin輔助方法 184
6.5.3  使用Lodash模板 185
6.5.4  添加CSS庫 187
6.5.5  注冊自定義webpack加載器 189
6.5.6  注冊自定義webpack插件 192
6.5.7  在特定的鉤子上創(chuàng)建任務(wù) 193
6.6  本章小結(jié) 195
第7章  添加Vue表單 197
7.1  理解v-model 197
7.1.1  在文本和文本框中使用v-model 197
7.1.2  在復(fù)選框和單選按鈕元素中使用v-model 199
7.1.3  在select元素中使用v-model 200
7.2  利用基本的數(shù)據(jù)綁定機(jī)制驗證表單 201
7.2.1  驗證文本元素 202
7.2.2  驗證textarea元素 203
7.2.3  驗證復(fù)選框元素 204
7.2.4  驗證單元按鈕元素 205
7.2.5  驗證select元素 206
7.3  生成動態(tài)值綁定 208
7.3.1  替換布爾值—checkbox元素 209
7.3.2  利用動態(tài)屬性替換字符串—radio屬性 209
7.3.3  利用對象替換字符串 210
7.4  使用修飾符 211
7.4.1  添加.lazy 211
7.4.2  添加.number 211
7.4.3  添加.trim 212
7.5  利用VeeValidate驗證表單 212
7.6  在Nuxt應(yīng)用程序中使用自定義驗證 215
7.7  本章小結(jié) 219
第3部分  服務(wù)器開發(fā)和數(shù)據(jù)管理
第8章  添加服務(wù)器端框架 223
8.1  引入Backpack 223
8.1.1  安裝和配置Backpack 223
8.1.2  利用Backpack創(chuàng)建一個簡單的應(yīng)用程序 224
8.2  引入Koa 226
8.2.1  安裝和配置Koa 226
8.2.2  ctx的含義 227
8.2.3  了解Koa級聯(lián)機(jī)制的工作方式 227
8.3  將Koa與Nuxt進(jìn)行集成 231
8.4  理解異步數(shù)據(jù) 236
8.4.1  返回一個Promise 237
8.4.2  使用async/await 237
8.4.3  合并數(shù)據(jù) 238
8.5  訪問asyncData中的上下文 238
8.5.1  訪問req/res對象 239
8.5.2  訪問動態(tài)路由數(shù)據(jù) 239
8.5.3  監(jiān)聽查詢數(shù)據(jù) 240
8.5.4  處理錯誤 241
8.6  利用Axios獲取異步數(shù)據(jù) 242
8.6.1  安裝和配置Axios 242
8.6.2  利用Axios和asyncData獲取數(shù)據(jù) 243
8.6.3  監(jiān)聽查詢變化 245
8.7  本章小結(jié) 246
第9章  添加服務(wù)器端數(shù)據(jù)庫 247
9.1  引入MongoDB 247
9.1.1  安裝MongoDB 248
9.1.2  在Ubuntu 20.04上安裝MongoDB 248
9.1.3  啟動MongoDB 249
9.2  編寫基本的MongoDB查詢 250
9.2.1  創(chuàng)建一個數(shù)據(jù)庫 250
9.2.2  創(chuàng)建一個新的集合 251
9.3  編寫MongoDB CRUD操作 252
9.4  利用MongoDB CRUD注入數(shù)據(jù) 253
9.4.1  插入文檔 253
9.4.2  查詢文檔 254
9.4.3  更新文檔 256
9.4.4  刪除文檔 258
9.5  將MongoDB與Koa進(jìn)行集成 259
9.5.1  安裝MongoDB驅(qū)動程序 259
9.5.2  利用MongoDB驅(qū)動程序創(chuàng)建簡單的應(yīng)用程序 259
9.5.3  配置MongoDB驅(qū)動程序 261
9.5.4  理解ObjectId和ObjectId方法 262
9.5.5  注入一個文檔 263
9.5.6  獲取所有文檔 265
9.5.7  更新一個文檔 266
9.5.8  刪除一個文檔 267
9.6  將MongoDB與Nuxt頁面進(jìn)行集成 268
9.6.1  創(chuàng)建一個頁面用于添加新用戶 269
9.6.2  創(chuàng)建更新頁面用于更新已有用戶 269
9.6.3  創(chuàng)建刪除頁面用于刪除已有用戶 270
9.7  本章小結(jié) 272
第10章  添加Vuex Store 273
10.1  理解Vuex架構(gòu) 273
10.1.1  Vuex的含義 273
10.1.2  狀態(tài)管理模式 273
10.2  開始使用Vuex 275
10.2.1  安裝Vuex 275
10.2.2  創(chuàng)建一個簡單的存儲 276
10.3  理解Vuex核心概念 277
10.3.1  狀態(tài) 277
10.3.2  getter 280
10.3.3  突變 283
10.3.4  動作 285
10.3.5  模塊 287
10.4  構(gòu)建Vuex存儲模塊 293
10.4.1  創(chuàng)建簡單的存儲模塊結(jié)構(gòu) 293
10.4.2  創(chuàng)建高級的存儲模塊結(jié)構(gòu) 295
10.5  處理Vuex存儲中的表單 297
10.5.1  使用v-bind和v-on指令 298
10.5.2  使用雙向computed屬性 299
10.6  在Nuxt中使用Vuex存儲 300
10.6.1  使用模塊模式 300
10.6.2  使用模塊文件 304
10.6.3  使用fetch方法 306
10.6.4  使用nuxtServerInit動作 308
10.7  本章小結(jié) 312
第4部分  中間件和安全
第11章  編寫路由中間件和服務(wù)器中間件 315
11.1  利用Vue Router編寫中間件 315
11.1.1  中間件的具體含義 315
11.1.2  安裝Vue Router 316
11.1.3  使用導(dǎo)航保護(hù) 317
11.1.4  導(dǎo)航保護(hù)中的參數(shù)（to、from和next） 323
11.2  Vue CLI簡介 326
11.2.1  安裝Vue CLI 326
11.2.2  Vue CLI的項目結(jié)構(gòu) 327
11.2.3  利用Vue CLI編寫中間件和Vuex存儲 329
11.3  在Nuxt中編寫路由中間件 334
11.3.1  編寫全局中間件 335
11.3.2  編寫逐個路由中間件 338
11.4  編寫Nuxt服務(wù)器中間件 341
11.4.1  將Express用作Nuxt的服務(wù)器中間件 342
11.4.2  將Koa用作Nuxt的服務(wù)器中間件 346
11.4.3  創(chuàng)建自定義服務(wù)器中間件 349
11.5  本章小結(jié) 350
第12章  創(chuàng)建用戶登錄和API身份驗證 351
12.1  理解基于會話的身份驗證 351
12.1.1  會話和cookie的含義 352
12.1.2  會話身份驗證流 352
12.2  理解基于令牌的身份驗證 353
12.2.1  JWT的含義 353
12.2.2  令牌身份驗證流 354
12.2.3  針對JWT使用Node.js模塊 355
12.3  創(chuàng)建后端身份驗證 356
12.3.1  使用MySQL作為服務(wù)器數(shù)據(jù)庫 356
12.3.2  構(gòu)建跨域應(yīng)用程序目錄 357
12.3.3  創(chuàng)建API公共/私有路由及其模塊 359
12.3.4  針對Node.js使用bcryptjs模塊 368
12.3.5  針對Node.js使用mysql模塊 369
12.3.6  重構(gòu)服務(wù)器端上的登錄代碼 372
12.3.7  驗證服務(wù)器端上的輸入令牌 374
12.4  創(chuàng)建前端身份驗證 375
12.4.1  在（Nuxt）客戶端上使用cookie 377
12.4.2  在（Nuxt）服務(wù)器端使用cookie 378
12.5  利用Google OAuth進(jìn)行簽名 379
12.5.1  向后端身份驗證中添加Google OAuth 380
12.5.2  針對Google OAtuh創(chuàng)建前端身份驗證 384
12.6  本章小結(jié) 387
第5部分  測試和開發(fā)
第13章  編寫端到端測試 391
13.1  端到端測試和單元測試 391
13.2  端到端測試工具 392
13.2.1  jsdom 392
13.2.2  AVA 395
13.3  利用jsdom和AVA編寫Nuxt應(yīng)用程序測試 397
13.4  Nightwatch簡介 400
13.5  利用Nightwatch編寫Nuxt應(yīng)用程序測試 404
13.6  本章小結(jié) 406
第14章  Linter、格式化程序和部署命令 407
14.1  Linter簡介—Prettier、ESLint和StandardJS 407
14.1.1  Prettier 407
14.1.2  ESLint 410
14.1.3  StandardJS 413
14.2  集成ESLint和Prettier 414
14.3  在Vue和Nuxt應(yīng)用程序中使用ESLint和Prettier 416
14.3.1  配置Vue規(guī)則 418
14.3.2  在Nuxt應(yīng)用程序中分別運行ESLint和Prettier 422
14.4  部署Nuxt應(yīng)用程序 424
14.4.1  部署一個Nuxt通用服務(wù)器端渲染應(yīng)用程序 424
14.4.2  部署Nuxt靜態(tài)生成（預(yù)渲染）的應(yīng)用程序 426
14.4.3  在虛擬專用服務(wù)器上托管Nuxt通用SSR應(yīng)用程序 428
14.4.4  在共享主機(jī)服務(wù)器上托管Nuxt通用SSR應(yīng)用程序 428
14.4.5  在靜態(tài)站點托管服務(wù)器上托管Nuxt靜態(tài)生成的應(yīng)用程序 430
14.5  本章小結(jié) 431
第6部分  高 級 內(nèi) 容
第15章  利用Nuxt創(chuàng)建一個SPA 435
15.1  理解經(jīng)典SPA和Nuxt SPA 435
15.2  安裝Nuxt SPA 437
15.3  開發(fā)Nuxt SPA 438
15.3.1  創(chuàng)建客戶端nuxtServerInit動作 439
15.3.2  利用插件創(chuàng)建多個自定義Axios實例 441
15.4  部署Nuxt SPA 444
15.5  本章小結(jié) 450
第16章  為Nuxt創(chuàng)建一個框架無關(guān)的PHP API 451
16.1  PHP簡介 451
16.1.1  安裝或升級PHP 452
16.1.2  配置PHP 453
16.1.3  利用內(nèi)建PHP Web服務(wù)器運行PHP應(yīng)用程序 454
16.2  理解HTTP消息和PSR 455
16.2.1  PSR 461
16.2.2  PSR-12—擴(kuò)展的編碼樣式指南 462
16.2.3  PSR-4—自動加載器 465
16.2.4  PSR-7—HTTP消息接口 469
16.2.5  HTTP服務(wù)器請求處理程序（請求處理程序） 473
16.2.6  PSR-15—HTTP服務(wù)器請求處理程序（中間件） 474
16.2.7  PSR-7/PSR-15路由器 476
16.3  利用PHP數(shù)據(jù)庫框架編寫CRUD操作 479
16.3.1  創(chuàng)建MySQL表 479
16.3.2  使用Medoo作為數(shù)據(jù)庫框架 480
16.3.3  插入記錄 483
16.3.4  查詢記錄 484
16.3.5  更新記錄 484
16.3.6  刪除數(shù)據(jù) 485
16.3.7  結(jié)構(gòu)化跨域應(yīng)用程序目錄 485
16.3.8  創(chuàng)建API的公共路由及其模塊 489
16.4  與Nuxt進(jìn)行集成 492
16.5  本章小結(jié) 495
第17章  利用Nuxt創(chuàng)建一個實時應(yīng)用程序 497
17.1  RethinkDB簡介 497
17.1.1  安裝RethinkDB Server 497
17.1.2  ReQL簡介 498
17.2  將RethinkDB與Koa進(jìn)行集成 503
17.2.1  重新構(gòu)建API目錄 503
17.2.2  添加并使用RethinkDB JavaScript客戶端 506
17.2.3  RethinkDB中的強(qiáng)制模式 512
17.2.4  RethinkDB中的changefeeds 514
17.3  Socket.IO簡介 515
17.3.1  添加和使用Socket.IO服務(wù)器和客戶端 516
17.3.2  集成Socket.IO服務(wù)器和RethinkDB changefeeds 519
17.4  將Socket.IO與Nuxt進(jìn)行集成 521
17.5  本章小結(jié) 527
第18章  利用CMS和GraphQL創(chuàng)建Nuxt應(yīng)用程序 529
18.1  在WordPress中創(chuàng)建無頭REST API 530
18.1.1  安裝WordPress并創(chuàng)建第一個頁面 530
18.1.2  在WordPress中創(chuàng)建自定義文章類型 532
18.1.3  擴(kuò)展WordPress REST API 534
18.1.4  集成Nuxt和WordPress中的流式圖像 539
18.2  Keystone簡介 545
18.2.1  PostgreSQL的安裝和安全機(jī)制（Ubuntu） 545
18.2.2  MongoDB的安裝和安全機(jī)制（Ubuntu） 547
18.2.3  安裝和創(chuàng)建Keystone應(yīng)用程序 549
18.2.4  創(chuàng)建列表和字段 553
18.3  GraphQL簡介 559
18.3.1  理解GraphQL模式和解析器 561
18.3.2  GraphQL默認(rèn)解析器 566
18.3.3  利用Apollo Server創(chuàng)建GraphQL API 567
18.3.4  使用Keystone GraphQL API 571
18.4  集成Keystone、GraphQL和Nuxt 573
18.5  本章小結(jié) 579