Nuxt.js Web 開發實戰 Hands-on Nuxt.js Web Development: Build universal and static-generated Vue.js applications using Nuxt.js

[馬來西亞] 郭隆添 著 張騫 譯

  • Nuxt.js Web 開發實戰-preview-1
  • Nuxt.js Web 開發實戰-preview-2
  • Nuxt.js Web 開發實戰-preview-3
Nuxt.js Web 開發實戰-preview-1

買這商品的人也買了...

相關主題

商品描述

《Nuxt.js Web開發實戰》詳細闡述了與Nuxt.js相關的基本解決方案,主要包括Nuxt簡介,開始Nuxt之旅,添加UI框架,添加視圖、路由和過渡效果,添加Vue組件,編寫插件和模塊,添加Vue表單,添加服務器端框架,添加服務器端數據庫,添加Vuex Store,編寫路由中間件和服務器中間件,創建用戶登錄和API身份驗證,編寫端到端測試,Linter、格式化程序和部署命令,利用Nuxt創建一個SPA,為Nuxt創建一個框架無關的PHP API,利用Nuxt創建一個實時應用程序,利用CMS和GraphQL創建Nuxt應用程序等內容。此外,本書還提供了相應的示例、代碼,以幫助讀者進一步理解相關方案的實現過程。

目錄大綱

目    錄

第1部分  第1個Nuxt應用程序

第1章  Nuxt簡介 3

1.1  從Vue到Nuxt 3

1.2  為何使用Nuxt 4

1.2.1  編寫單文件組件 4

1.2.2  編寫ES2015+ 6

1.2.3  利用預處理器編寫CSS 6

1.2.4  利用模塊和插件擴展Nuxt 7

1.2.5  在路由之間添加過渡 8

1.2.6  管理<head>元素 9

1.2.7  利用webpack打包和劃分代碼 9

1.3  應用程序的類型 11

1.3.1  傳統的服務器端渲染的應用程序 11

1.3.2  傳統的單頁應用程序(SPA) 12

1.3.3  通用服務器端渲染的應用程序(SSR) 14

1.3.4  靜態生成的應用程序 15

1.4  作為通用SSR應用程序的Nuxt 16

1.5  作為靜態站點生成器的Nuxt 17

1.6  作為單頁應用程序的Nuxt 17

1.7  本章小結 18

第2章  開始Nuxt之旅 19

2.1  技術需求 19

2.2  安裝Nuxt 20

2.2.1  使用create-nuxt-app 20

2.2.2  從頭開始安裝 22

2.3  瞭解目錄結構 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  瞭解數據資源服務機制 41

2.6  本章小結 44

第3章  添加UI框架 45

3.1  添加Foundation和Motion UI 45

3.1.1  利用Foundation創建網格佈局和站點導航 47

3.1.2  使用Foundation中的JavaScript實用程序和插件 49

3.1.3  利用Motion UI創建CSS動畫和過渡 52

3.1.4  利用Foundation Icon Fonts 3添加圖標 55

3.2  添加Less(Leaner Style Sheets) 56

3.3  添加jQuery UI 59

3.4  添加AOS 62

3.5  添加Swiper 64

3.6  本章小結 67

第2部分  視圖、路由、組件、插件和模塊

第4章  添加視圖、路由和過渡效果 71

4.1  創建自定義路由 71

4.1.1  Vue Router 71

4.1.2  安裝Vue Router 72

4.1.3  利用Vue Router創建路由 72

4.1.4  創建基本的路由 74

4.1.5  創建動態路由 75

4.1.6  創建嵌套路由 76

4.1.7  創建動態嵌套路由 82

4.1.8  驗證路由參數 84

4.1.9  利用_.vue文件處理未知的路由 85

4.2  創建自定義視圖 87

4.2.1  理解Nuxt視圖 87

4.2.2  自定義應用程序模板 88

4.2.3  創建自定義HTML頭 89

4.2.4  創建自定義佈局 94

4.2.5  創建自定義頁面 97

4.2.6  理解頁面 97

4.3  創建自定義轉換 106

4.3.1  理解Vue中的轉換 106

4.3.2  利用pageTransition實現轉換 108

4.3.3  利用layoutTransition屬性實現轉換 111

4.3.4  利用CSS動畫實現轉換 113

4.3.5  利用JavaScript鉤子實現轉換 114

4.3.6  理解轉換模式 119

4.4  本章小結 120

第5章  添加Vue組件 121

5.1  瞭解Vue組件 121

5.1.1  什麽是組件 123

5.1.2  利用props向子組件傳遞數據 123

5.1.3  監聽子組件事件 126

5.1.4  利用v-mode創建自定義輸入組件 128

5.1.5  v-for循環中的key屬性 131

5.1.6  利用key屬性控制可復用的元素 135

5.2  創建單文件Vue組件 136

5.2.1  利用webpack編譯單文件組件 137

5.2.2  在單文件組件中傳遞數據和監聽事件 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  創建基本的混入/非全局混入 153

5.4.2  創建全局混入 155

5.5  定義組件名並使用命名規則 156

5.5.1  多個單詞構成的組件名稱 156

5.5.2  組件數據 157

5.5.3  props定義 158

5.5.4  組件文件 158

5.5.5  單文件組件文件名大小寫 159

5.5.6  自閉合組件 159

5.6  本章小結 160

第6章  編寫插件和模塊 161

6.1  編寫Vue插件 161

6.1.1  在Vue中編寫自定義插件 162

6.1.2  將Vue插件導入Nuxt中 165

6.1.3  在缺少SSR支持的情況下導入外部Vue插件 166

6.2  在Nuxt中編寫全局函數 167

6.2.1  將函數註入Vue實例中 168

6.2.2  將函數註入Nuxt上下文中 169

6.2.3  將函數註入Vue實例和Nuxt上下文中 170

6.2.4  僅註入客戶端或服務器端插件 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  在特定的鉤子上創建任務 193

6.6  本章小結 195

第7章  添加Vue表單 197

7.1  理解v-model 197

7.1.1  在文本和文本框中使用v-model 197

7.1.2  在復選框和單選按鈕元素中使用v-model 199

7.1.3  在select元素中使用v-model 200

7.2  利用基本的數據綁定機制驗證表單 201

7.2.1  驗證文本元素 202

7.2.2  驗證textarea元素 203

7.2.3  驗證復選框元素 204

7.2.4  驗證單元按鈕元素 205

7.2.5  驗證select元素 206

7.3  生成動態值綁定 208

7.3.1  替換布爾值—checkbox元素 209

7.3.2  利用動態屬性替換字符串—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應用程序中使用自定義驗證 215

7.7  本章小結 219

第3部分  服務器開發和數據管理

第8章  添加服務器端框架 223

8.1  引入Backpack 223

8.1.1  安裝和配置Backpack 223

8.1.2  利用Backpack創建一個簡單的應用程序 224

8.2  引入Koa 226

8.2.1  安裝和配置Koa 226

8.2.2  ctx的含義 227

8.2.3  瞭解Koa級聯機制的工作方式 227

8.3  將Koa與Nuxt進行集成 231

8.4  理解異步數據 236

8.4.1  返回一個Promise 237

8.4.2  使用async/await 237

8.4.3  合並數據 238

8.5  訪問asyncData中的上下文 238

8.5.1  訪問req/res對象 239

8.5.2  訪問動態路由數據 239

8.5.3  監聽查詢數據 240

8.5.4  處理錯誤 241

8.6  利用Axios獲取異步數據 242

8.6.1  安裝和配置Axios 242

8.6.2  利用Axios和asyncData獲取數據 243

8.6.3  監聽查詢變化 245

8.7  本章小結 246

第9章  添加服務器端數據庫 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  創建一個數據庫 250

9.2.2  創建一個新的集合 251

9.3  編寫MongoDB CRUD操作 252

9.4  利用MongoDB CRUD註入數據 253

9.4.1  插入文檔 253

9.4.2  查詢文檔 254

9.4.3  更新文檔 256

9.4.4  刪除文檔 258

9.5  將MongoDB與Koa進行集成 259

9.5.1  安裝MongoDB驅動程序 259

9.5.2  利用MongoDB驅動程序創建簡單的應用程序 259

9.5.3  配置MongoDB驅動程序 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頁面進行集成 268

9.6.1  創建一個頁面用於添加新用戶 269

9.6.2  創建更新頁面用於更新已有用戶 269

9.6.3  創建刪除頁面用於刪除已有用戶 270

9.7  本章小結 272

第10章  添加Vuex Store 273

10.1  理解Vuex架構 273

10.1.1  Vuex的含義 273

10.1.2  狀態管理模式 273

10.2  開始使用Vuex 275

10.2.1  安裝Vuex 275

10.2.2  創建一個簡單的存儲 276

10.3  理解Vuex核心概念 277

10.3.1  狀態 277

10.3.2  getter 280

10.3.3  突變 283

10.3.4  動作 285

10.3.5  模塊 287

10.4  構建Vuex存儲模塊 293

10.4.1  創建簡單的存儲模塊結構 293

10.4.2  創建高級的存儲模塊結構 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  本章小結 312

第4部分  中間件和安全

第11章  編寫路由中間件和服務器中間件 315

11.1  利用Vue Router編寫中間件 315

11.1.1  中間件的具體含義 315

11.1.2  安裝Vue Router 316

11.1.3  使用導航保護 317

11.1.4  導航保護中的參數(to、from和next) 323

11.2  Vue CLI簡介 326

11.2.1  安裝Vue CLI 326

11.2.2  Vue CLI的項目結構 327

11.2.3  利用Vue CLI編寫中間件和Vuex存儲 329

11.3  在Nuxt中編寫路由中間件 334

11.3.1  編寫全局中間件 335

11.3.2  編寫逐個路由中間件 338

11.4  編寫Nuxt服務器中間件 341

11.4.1  將Express用作Nuxt的服務器中間件 342

11.4.2  將Koa用作Nuxt的服務器中間件 346

11.4.3  創建自定義服務器中間件 349

11.5  本章小結 350

第12章  創建用戶登錄和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  創建後端身份驗證 356

12.3.1  使用MySQL作為服務器數據庫 356

12.3.2  構建跨域應用程序目錄 357

12.3.3  創建API公共/私有路由及其模塊 359

12.3.4  針對Node.js使用bcryptjs模塊 368

12.3.5  針對Node.js使用mysql模塊 369

12.3.6  重構服務器端上的登錄代碼 372

12.3.7  驗證服務器端上的輸入令牌 374

12.4  創建前端身份驗證 375

12.4.1  在(Nuxt)客戶端上使用cookie 377

12.4.2  在(Nuxt)服務器端使用cookie 378

12.5  利用Google OAuth進行簽名 379

12.5.1  向後端身份驗證中添加Google OAuth 380

12.5.2  針對Google OAtuh創建前端身份驗證 384

12.6  本章小結 387

第5部分  測試和開發

第13章  編寫端到端測試 391

13.1  端到端測試和單元測試 391

13.2  端到端測試工具 392

13.2.1  jsdom 392

13.2.2  AVA 395

13.3  利用jsdom和AVA編寫Nuxt應用程序測試 397

13.4  Nightwatch簡介 400

13.5  利用Nightwatch編寫Nuxt應用程序測試 404

13.6  本章小結 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應用程序中使用ESLint和Prettier 416

14.3.1  配置Vue規則 418

14.3.2  在Nuxt應用程序中分別運行ESLint和Prettier 422

14.4  部署Nuxt應用程序 424

14.4.1  部署一個Nuxt通用服務器端渲染應用程序 424

14.4.2  部署Nuxt靜態生成(預渲染)的應用程序 426

14.4.3  在虛擬專用服務器上托管Nuxt通用SSR應用程序 428

14.4.4  在共享主機服務器上托管Nuxt通用SSR應用程序 428

14.4.5  在靜態站點托管服務器上托管Nuxt靜態生成的應用程序 430

14.5  本章小結 431

第6部分  高 級 內 容

第15章  利用Nuxt創建一個SPA 435

15.1  理解經典SPA和Nuxt SPA 435

15.2  安裝Nuxt SPA 437

15.3  開發Nuxt SPA 438

15.3.1  創建客戶端nuxtServerInit動作 439

15.3.2  利用插件創建多個自定義Axios實例 441

15.4  部署Nuxt SPA 444

15.5  本章小結 450

第16章  為Nuxt創建一個框架無關的PHP API 451

16.1  PHP簡介 451

16.1.1  安裝或升級PHP 452

16.1.2  配置PHP 453

16.1.3  利用內建PHP Web服務器運行PHP應用程序 454

16.2  理解HTTP消息和PSR 455

16.2.1  PSR 461

16.2.2  PSR-12—擴展的編碼樣式指南 462

16.2.3  PSR-4—自動加載器 465

16.2.4  PSR-7—HTTP消息接口 469

16.2.5  HTTP服務器請求處理程序(請求處理程序) 473

16.2.6  PSR-15—HTTP服務器請求處理程序(中間件) 474

16.2.7  PSR-7/PSR-15路由器 476

16.3  利用PHP數據庫框架編寫CRUD操作 479

16.3.1  創建MySQL表 479

16.3.2  使用Medoo作為數據庫框架 480

16.3.3  插入記錄 483

16.3.4  查詢記錄 484

16.3.5  更新記錄 484

16.3.6  刪除數據 485

16.3.7  結構化跨域應用程序目錄 485

16.3.8  創建API的公共路由及其模塊 489

16.4  與Nuxt進行集成 492

16.5  本章小結 495

第17章  利用Nuxt創建一個實時應用程序 497

17.1  RethinkDB簡介 497

17.1.1  安裝RethinkDB Server 497

17.1.2  ReQL簡介 498

17.2  將RethinkDB與Koa進行集成 503

17.2.1  重新構建API目錄 503

17.2.2  添加並使用RethinkDB JavaScript客戶端 506

17.2.3  RethinkDB中的強制模式 512

17.2.4  RethinkDB中的changefeeds 514

17.3  Socket.IO簡介 515

17.3.1  添加和使用Socket.IO服務器和客戶端 516

17.3.2  集成Socket.IO服務器和RethinkDB changefeeds 519

17.4  將Socket.IO與Nuxt進行集成 521

17.5  本章小結 527

第18章  利用CMS和GraphQL創建Nuxt應用程序 529

18.1  在WordPress中創建無頭REST API 530

18.1.1  安裝WordPress並創建第一個頁面 530

18.1.2  在WordPress中創建自定義文章類型 532

18.1.3  擴展WordPress REST API 534

18.1.4  集成Nuxt和WordPress中的流式圖像 539

18.2  Keystone簡介 545

18.2.1  PostgreSQL的安裝和安全機制(Ubuntu) 545

18.2.2  MongoDB的安裝和安全機制(Ubuntu) 547

18.2.3  安裝和創建Keystone應用程序 549

18.2.4  創建列表和字段 553

18.3  GraphQL簡介 559

18.3.1  理解GraphQL模式和解析器 561

18.3.2  GraphQL默認解析器 566

18.3.3  利用Apollo Server創建GraphQL API 567

18.3.4  使用Keystone GraphQL API 571

18.4  集成Keystone、GraphQL和Nuxt 573

18.5  本章小結 579