隨著互聯(lián)網(wǎng)的飛速發(fā)展，Web開發(fā)已經(jīng)成為了當(dāng)今技術(shù)領(lǐng)域最熱門的話題之一。在這個(gè)競(jìng)爭(zhēng)激烈的市場(chǎng)中，開發(fā)者們不斷地尋求新的技術(shù)和工具來提高開發(fā)效率、降低維護(hù)成本。而在這個(gè)過程中，Nuxt.js作為一款革命性的Web開發(fā)框架，正逐漸成為開發(fā)者們的寵兒。本文將詳細(xì)介紹Nuxt.js的特點(diǎn)、優(yōu)勢(shì)以及在實(shí)際應(yīng)用中的一些案例，幫助大家更好地了解這款強(qiáng)大的框架。

一、Nuxt.js簡(jiǎn)介

Nuxt.js是一個(gè)基于Vue.js的通用應(yīng)用框架，它的目標(biāo)是讓W(xué)eb開發(fā)變得更加簡(jiǎn)單、高效。Nuxt.js提供了一套完整的前端開發(fā)解決方案，包括項(xiàng)目腳手架、路由管理、狀態(tài)管理、服務(wù)器端渲染等功能。通過使用Nuxt.js，開發(fā)者可以快速地構(gòu)建出高性能、可擴(kuò)展的Web應(yīng)用。

二、Nuxt.js的特點(diǎn)

1. 集成Vue.js和Node.js

Nuxt.js是基于Vue.js的，因此它繼承了Vue.js的所有優(yōu)點(diǎn)，如易用性、靈活性等。同時(shí)，Nuxt.js還與Node.js緊密集成，使得開發(fā)者可以在項(xiàng)目中輕松地使用Node.js的各種功能，如文件操作、模塊加載等。

2. 自動(dòng)代碼分割和優(yōu)化

Nuxt.js會(huì)自動(dòng)對(duì)項(xiàng)目的代碼進(jìn)行分割和優(yōu)化，以提高應(yīng)用的性能。這意味著開發(fā)者無需手動(dòng)進(jìn)行代碼分割和優(yōu)化，只需專注于業(yè)務(wù)邏輯的開發(fā)即可。

3. 服務(wù)端渲染（SSR）

Nuxt.js支持服務(wù)端渲染，這意味著在頁面加載時(shí)，服務(wù)器會(huì)先生成HTML靜態(tài)頁面，然后再將其發(fā)送給客戶端。這樣可以減少客戶端的計(jì)算負(fù)擔(dān)，提高頁面加載速度。此外，服務(wù)端渲染還可以提高搜索引擎的抓取效果，有助于提高網(wǎng)站的SEO排名。

4. 強(qiáng)大的路由管理

Nuxt.js提供了一套強(qiáng)大的路由管理系統(tǒng)，可以輕松地處理各種復(fù)雜的路由場(chǎng)景。通過使用Nuxt.js的路由管理功能，開發(fā)者可以實(shí)現(xiàn)單頁應(yīng)用（SPA）和多頁應(yīng)用（MPA）之間的無縫切換。

5. 豐富的插件系統(tǒng)

Nuxt.js擁有一個(gè)豐富的插件系統(tǒng)，開發(fā)者可以通過安裝各種插件來擴(kuò)展Nuxt.js的功能。目前，Nuxt.js已經(jīng)內(nèi)置了許多實(shí)用的插件，如i18n（國際化）、pwa（漸進(jìn)式Web應(yīng)用）等。此外，開發(fā)者還可以根據(jù)項(xiàng)目需求自定義插件。

三、Nuxt.js的優(yōu)勢(shì)

1. 提高開發(fā)效率

通過使用Nuxt.js，開發(fā)者可以快速地構(gòu)建出高性能、可擴(kuò)展的Web應(yīng)用。這是因?yàn)镹uxt.js提供了一套完整的前端開發(fā)解決方案，包括項(xiàng)目腳手架、路由管理、狀態(tài)管理等功能。此外，Nuxt.js還支持自動(dòng)代碼分割和優(yōu)化、服務(wù)端渲染等功能，可以幫助開發(fā)者提高開發(fā)效率。

2. 降低維護(hù)成本

由于Nuxt.js具有高度的模塊化和可擴(kuò)展性，因此開發(fā)者可以輕松地對(duì)項(xiàng)目進(jìn)行維護(hù)和升級(jí)。此外，Nuxt.js還提供了豐富的插件系統(tǒng)，開發(fā)者可以通過安裝各種插件來擴(kuò)展Nuxt.js的功能，以滿足項(xiàng)目的需求。

3. 提高用戶體驗(yàn)

通過使用Nuxt.js的服務(wù)端渲染功能，可以提高頁面加載速度，從而提高用戶體驗(yàn)。此外，Nuxt.js還支持PWA功能，可以讓W(xué)eb應(yīng)用具有類似原生應(yīng)用的體驗(yàn)。

四、Nuxt.js在實(shí)際應(yīng)用中的案例

1. 電商網(wǎng)站

對(duì)于電商網(wǎng)站來說，性能和用戶體驗(yàn)是非常重要的。通過使用Nuxt.js的服務(wù)端渲染功能，可以提高頁面加載速度，從而提高用戶體驗(yàn)。此外，Nuxt.js還支持PWA功能，可以讓W(xué)eb應(yīng)用具有類似原生應(yīng)用的體驗(yàn)。因此，越來越多的電商網(wǎng)站開始使用Nuxt.js作為其前端開發(fā)框架。

2. 企業(yè)內(nèi)部管理系統(tǒng)

對(duì)于企業(yè)內(nèi)部管理系統(tǒng)來說，安全性和可擴(kuò)展性是非常重要的。通過使用Nuxt.js的高度模塊化和可擴(kuò)展性，開發(fā)者可以輕松地對(duì)項(xiàng)目進(jìn)行維護(hù)和升級(jí)。此外，Nuxt.js還提供了豐富的插件系統(tǒng)，開發(fā)者可以通過安裝各種插件來擴(kuò)展Nuxt.js的功能，以滿足項(xiàng)目的需求。因此，越來越多的企業(yè)內(nèi)部管理系統(tǒng)開始使用Nuxt.js作為其前端開發(fā)框架。

3. 個(gè)人博客和CMS系統(tǒng)

對(duì)于個(gè)人博客和CMS系統(tǒng)來說，易用性和靈活性是非常重要的。通過使用Nuxt.js的Vue.js基礎(chǔ)和Node.js集成，開發(fā)者可以輕松地實(shí)現(xiàn)各種功能。此外，Nuxt.js還提供了一套完整的前端開發(fā)解決方案，包括項(xiàng)目腳手架、路由管理、狀態(tài)管理等功能。因此，越來越多的個(gè)人博客和CMS系統(tǒng)開始使用Nuxt.js作為其前端開發(fā)框架。

總之，Nuxt.js作為一款革命性的Web開發(fā)框架，正逐漸成為開發(fā)者們的寵兒。通過使用Nuxt.js，開發(fā)者可以快速地構(gòu)建出高性能、可擴(kuò)展的Web應(yīng)用，提高開發(fā)效率、降低維護(hù)成本。在未來的Web開發(fā)領(lǐng)域，Nuxt.js無疑將發(fā)揮越來越重要的作用。

《Nuxt.js Web開發(fā)實(shí)戰(zhàn)》

編輯推薦

Nuxt.js（本書稱作Nuxt）是一個(gè)基于Vue.js（本書稱作Vue）的先進(jìn)的Web框架，主要用于服務(wù)器端渲染（SSR）?，F(xiàn)在，借助Nuxt和Vue，構(gòu)建通用和靜態(tài)生成的應(yīng)用程序比以往任何時(shí)候都更加容易。

內(nèi)容簡(jiǎn)介

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

作者簡(jiǎn)介

郭隆添是一位跨學(xué)科的全棧web開發(fā)人員/設(shè)計(jì)師和分析師。他出生在馬來西亞檳城。他在馬來西亞沙撈越大學(xué)獲得應(yīng)用藝術(shù)學(xué)士學(xué)位(1996 - 1999年)，在英國普利茅斯大學(xué)數(shù)字藝術(shù)與技術(shù)學(xué)院獲得數(shù)字未來碩士學(xué)位(2002 - 2003年)。

前 言

Nuxt.js（本書稱作Nuxt）是一個(gè)基于Vue.js（本書稱作Vue）的先進(jìn)的Web框架，主要用于服務(wù)器端渲染（SSR）?，F(xiàn)在，借助Nuxt和Vue，構(gòu)建通用和靜態(tài)生成的應(yīng)用程序比以往任何時(shí)候都更加容易。本書將幫助讀者學(xué)習(xí)和運(yùn)行Nuxt的基礎(chǔ)內(nèi)容，以及如何將其與Vue的最新版本集成，使讀者能夠使用Nuxt和Vue.js構(gòu)建整個(gè)項(xiàng)目，包括身份驗(yàn)證、測(cè)試和部署，并考查Nuxt的目錄結(jié)構(gòu)，通過Nuxt的頁面、視圖、路由機(jī)制和Vue組件，以及編寫插件、模塊、Vuex存儲(chǔ)和中間件創(chuàng)建Nuxt項(xiàng)目。此外，我們還將通過Koa.js（在本書中稱作Koa）、PHP標(biāo)準(zhǔn)推薦（PSR）、MongoDB和MySQL，以及將WordPress用作一個(gè)無頭CMS和REST API，進(jìn)而介紹如何創(chuàng)建Node.js和PHP API。另外，我們還將Keystone.js用作GraphQL API以進(jìn)一步完善Nuxt。接下來，我們將介紹如何利用Socket.IO和RethinkDB創(chuàng)建實(shí)時(shí)Nuxt應(yīng)用程序和API，最終從遠(yuǎn)程API（無論是REST API還是GraphQL API）生成包含Nuxt和資源流（圖像和視頻）的靜態(tài)站點(diǎn)。

適用讀者

本書主要面向JavaScript或全站開發(fā)人員而編寫，他們希望構(gòu)建服務(wù)器端渲染的Vue.js應(yīng)用程序。因此，熟悉Vue.js框架將有助于理解本書中涉及的核心概念。

本書內(nèi)容

第1章介紹Nuxt的主要特性。另外，本章還介紹當(dāng)前Web應(yīng)用程序的類型以及Nuxt符合哪些類別。在后續(xù)章節(jié)中，我們依次考查Nuxt的各種用途。

第2章介紹如何通過構(gòu)建工具或通過手動(dòng)方式安裝Nuxt，進(jìn)而創(chuàng)建第1個(gè)Nuxt應(yīng)用程序。此外，本章還介紹Nuxt項(xiàng)目中默認(rèn)的目錄結(jié)構(gòu)、配置Nuxt以滿足項(xiàng)目需求，并理解數(shù)據(jù)資源服務(wù)機(jī)制。

第3章探討如何添加自定義UI框架，如Zurb Foundation、Motion UI、Less CSS等，以簡(jiǎn)化Nuxt中的UI開發(fā)并體驗(yàn)開發(fā)過程中的各種樂趣。

第4章在Nuxt應(yīng)用程序中創(chuàng)建導(dǎo)航路由、自定義頁面、布局和模板。另外，本章還介紹如何添加轉(zhuǎn)化和動(dòng)畫、創(chuàng)建自定義錯(cuò)誤頁面、自定義全局元標(biāo)簽，以及向獨(dú)立頁面中添加特定的標(biāo)簽。

第5章向Nuxt應(yīng)用程序中添加Vue組件。我們編寫基本的全局混入并定義遵循命名規(guī)則的組件名稱，進(jìn)而介紹如何創(chuàng)建全局和本地組件并復(fù)用這些組件。

第6章在Nuxt應(yīng)用程序中創(chuàng)建并添加插件、模塊和模塊片段。此外，本章還介紹如何創(chuàng)建Vue插件并在Nuxt項(xiàng)目中安裝這些插件、編寫全局函數(shù)并注冊(cè)這些函數(shù)。

第7章通過v-model和v-bind創(chuàng)建表單，并使用修飾符驗(yàn)證表單元素并進(jìn)行動(dòng)態(tài)值綁定。另外，我們還介紹如何使用Vue插件VeeValidate以簡(jiǎn)化前端驗(yàn)證操作。

第8章把Koa用作服務(wù)器端框架，進(jìn)而創(chuàng)建一個(gè)API以進(jìn)一步完善Nuxt應(yīng)用程序。另外，本章還考查如何安裝Koa及其Node.js包，以創(chuàng)建一個(gè)可完整工作的API并將其與Nuxt應(yīng)用程序進(jìn)行集成。除此之外，我們還介紹Nuxt中的異步數(shù)據(jù)，并通過異步數(shù)據(jù)訪問Nuxt上下文、監(jiān)聽查詢變化、處理錯(cuò)誤、將Axios用作HTTP客戶端（請(qǐng)求API中的數(shù)據(jù)）以從Koa API中獲取數(shù)據(jù)。

第9章使用MongoDB管理Nuxt應(yīng)用程序中的數(shù)據(jù)庫。其間，我們介紹如何安裝MongoDB、編寫基本的MongoDB查詢、向MongoDB數(shù)據(jù)庫中添加虛擬數(shù)據(jù)、利用Koa將MongoDB與第8章中的API進(jìn)行集成，并隨后從Nuxt應(yīng)用程序中獲取數(shù)據(jù)。

第10章針對(duì)Nuxt應(yīng)用程序使用Vuex管理和中心化存儲(chǔ)數(shù)據(jù)。在本章，我們了解Vuex架構(gòu)、利用存儲(chǔ)的突變（mutation）和操作方法更改存儲(chǔ)數(shù)據(jù)、在存儲(chǔ)程序復(fù)雜化時(shí)采用模塊化方式構(gòu)建存儲(chǔ)程序，以及在Vuex存儲(chǔ)中處理表單。

第11章在Nuxt應(yīng)用程序中創(chuàng)建路由中間件和服務(wù)器中間件。我們介紹如何利用Vue Router創(chuàng)建中間件，通過Vue CLI將Express.js（本書稱作Express）、Koa、Connect.js（本書稱作Connect）用作服務(wù)器中間件以創(chuàng)建Vue應(yīng)用程序。

第12章利用會(huì)話、JSON Web令牌（token）、Google OAuth和第11章介紹的路由中間件向Nuxt應(yīng)用程序的限制頁面中添加身份驗(yàn)證。在本章，我們介紹如何利用在Nuxt應(yīng)用程序的客戶端和服務(wù)器端上的Cookie（前端身份驗(yàn)證），并向后端和前端身份驗(yàn)證中加入Google OAuth，進(jìn)而創(chuàng)建基于JWT的后端身份驗(yàn)證機(jī)制。

第13章通過AVA、jsdom和Nightwatch.js創(chuàng)建端到端的測(cè)試。在本章，我們介紹安裝這些工具、設(shè)置測(cè)試環(huán)境并針對(duì)第12章的Nuxt應(yīng)用程序中的頁面編寫測(cè)試程序。

第14章使用ESLint、Prettier和StandardJS，以使代碼更加整潔且兼具可讀性和格式化特性。在本章，我們介紹如何安裝和配置這些工具以滿足相關(guān)需求，并在Nuxt應(yīng)用程序中集成不同的Linter。最后，本章還介紹如何利用Nuxt命令部署Nuxt應(yīng)用程序，以及發(fā)布應(yīng)用程序的托管服務(wù)。

第15章介紹如何在Nuxt中開發(fā)單頁應(yīng)用程序（SPA），并介紹Nuxt中的SPA與經(jīng)典SPA之間的不同之處，進(jìn)而生成靜態(tài)SPA并發(fā)布至靜態(tài)托管服務(wù)器（GitHub Pages）上。

第16章使用PHP創(chuàng)建一個(gè)API以進(jìn)一步完善Nuxt應(yīng)用程序。其間，我們介紹如何安裝Apache服務(wù)器和PHP引擎、了解HTTP消息和PHP標(biāo)準(zhǔn)、安裝MySQL作為數(shù)據(jù)庫系統(tǒng)、針對(duì)MySQL編寫CRUD操作、通過遵循PHP標(biāo)準(zhǔn)創(chuàng)建與框架無關(guān)的PHP API，并隨后將API與Nuxt應(yīng)用程序進(jìn)行集成。

第17章利用RethinkDB、Socket.IO和Koa開發(fā)一個(gè)實(shí)時(shí)Nuxt應(yīng)用程序。在本章，我們介紹如何安裝RethinkDB、考查ReQL方面的知識(shí)、將RethinkDB與Koa API進(jìn)行集成、將Socket.IO添加至API和Nuxt應(yīng)用程序中，最后利用RethinkDB Change Feed將Nuxt應(yīng)用程序轉(zhuǎn)換為一個(gè)實(shí)時(shí)Web應(yīng)用程序。

第18章使用（無頭）CMS和GraphQL以完善Nuxt應(yīng)用程序。在本章，我們介紹如何將WordPress轉(zhuǎn)換為無頭CMS、創(chuàng)建WordPress中的自定義POST類型，并擴(kuò)展WordPress REST API。接下來，我們介紹如何在Nuxt應(yīng)用程序中使用GraphQL、理解GraphQL模式和解析器、使用Appolo Server創(chuàng)建GraphQL API，以及如何使用Keystone.js GraphQL API。除此之外，本章還討論如何安裝安全的PostgreSQL和MongoDB、從遠(yuǎn)程API（無論是REST API還是GraphQL API）使用Nuxt和流資源（圖像和視頻）生成靜態(tài)站點(diǎn)。

目　　錄

第1部分  第1個(gè)Nuxt應(yīng)用程序
第1章  Nuxt簡(jiǎn)介 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)站點(diǎn)生成器的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選項(xiàng) 29
2.4.2  target選項(xiàng) 29
2.4.3  head選項(xiàng) 29
2.4.4  css選項(xiàng) 30
2.4.5  plugins選項(xiàng) 31
2.4.6  components選項(xiàng) 31
2.4.7  buildModules選項(xiàng) 31
2.4.8  modules選項(xiàng) 31
2.4.9  build選項(xiàng) 32
2.4.10  dev選項(xiàng) 33
2.4.11  rootDir選項(xiàng) 34
2.4.12  srcDir選項(xiàng) 34
2.4.13  server選項(xiàng) 35
2.4.14  env選項(xiàng) 36
2.4.15  router選項(xiàng) 37
2.4.16  dir選項(xiàng) 38
2.4.17  loading選項(xiàng) 39
2.4.18  pageTransition和layoutTransition選項(xiàng) 39
2.4.19  generate選項(xiàng) 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)格布局和站點(diǎn)導(dǎo)航 47
3.1.2  使用Foundation中的JavaScript實(shí)用程序和插件 49
3.1.3  利用Motion UI創(chuàng)建CSS動(dòng)畫和過渡 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)建動(dòng)態(tài)路由 75
4.1.6  創(chuàng)建嵌套路由 76
4.1.7  創(chuàng)建動(dòng)態(tài)嵌套路由 82
4.1.8  驗(yàn)證路由參數(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實(shí)現(xiàn)轉(zhuǎn)換 108
4.3.3  利用layoutTransition屬性實(shí)現(xiàn)轉(zhuǎn)換 111
4.3.4  利用CSS動(dòng)畫實(shí)現(xiàn)轉(zhuǎn)換 113
4.3.5  利用JavaScript鉤子實(shí)現(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  注冊(cè)全局和本地組件 147
5.3.1  在Vue中注冊(cè)全局組件 147
5.3.2  在Vue/Nuxt中注冊(cè)本地組件 148
5.3.3  在Nuxt中注冊(cè)全局組件 150
5.4  編寫基本和全局混入 152
5.4.1  創(chuàng)建基本的混入/非全局混入 153
5.4.2  創(chuàng)建全局混入 155
5.5  定義組件名并使用命名規(guī)則 156
5.5.1  多個(gè)單詞構(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實(shí)例中 168
6.2.2  將函數(shù)注入Nuxt上下文中 169
6.2.3  將函數(shù)注入Vue實(shí)例和Nuxt上下文中 170
6.2.4  僅注入客戶端或服務(wù)器端插件 172
6.3  編寫Nuxt模塊 174
6.4  編寫異步Nuxt模塊 180
6.4.1  使用async/await 180
6.4.2  返回一個(gè)Promise 181
6.5  編寫Nuxt模塊片段 182
6.5.1  使用選項(xiàng) 182
6.5.2  使用addPlugin輔助方法 184
6.5.3  使用Lodash模板 185
6.5.4  添加CSS庫 187
6.5.5  注冊(cè)自定義webpack加載器 189
6.5.6  注冊(cè)自定義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ī)制驗(yàn)證表單 201
7.2.1  驗(yàn)證文本元素 202
7.2.2  驗(yàn)證textarea元素 203
7.2.3  驗(yàn)證復(fù)選框元素 204
7.2.4  驗(yàn)證單元按鈕元素 205
7.2.5  驗(yàn)證select元素 206
7.3  生成動(dòng)態(tài)值綁定 208
7.3.1  替換布爾值—checkbox元素 209
7.3.2  利用動(dòng)態(tài)屬性替換字符串—radio屬性 209
7.3.3  利用對(duì)象替換字符串 210
7.4  使用修飾符 211
7.4.1  添加.lazy 211
7.4.2  添加.number 211
7.4.3  添加.trim 212
7.5  利用VeeValidate驗(yàn)證表單 212
7.6  在Nuxt應(yīng)用程序中使用自定義驗(yàn)證 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)建一個(gè)簡(jiǎn)單的應(yīng)用程序 224
8.2  引入Koa 226
8.2.1  安裝和配置Koa 226
8.2.2  ctx的含義 227
8.2.3  了解Koa級(jí)聯(lián)機(jī)制的工作方式 227
8.3  將Koa與Nuxt進(jìn)行集成 231
8.4  理解異步數(shù)據(jù) 236
8.4.1  返回一個(gè)Promise 237
8.4.2  使用async/await 237
8.4.3  合并數(shù)據(jù) 238
8.5  訪問asyncData中的上下文 238
8.5.1  訪問req/res對(duì)象 239
8.5.2  訪問動(dòng)態(tài)路由數(shù)據(jù) 239
8.5.3  監(jiān)聽查詢數(shù)據(jù) 240
8.5.4  處理錯(cuò)誤 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  啟動(dòng)MongoDB 249
9.2  編寫基本的MongoDB查詢 250
9.2.1  創(chuàng)建一個(gè)數(shù)據(jù)庫 250
9.2.2  創(chuàng)建一個(gè)新的集合 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ū)動(dòng)程序 259
9.5.2  利用MongoDB驅(qū)動(dòng)程序創(chuàng)建簡(jiǎn)單的應(yīng)用程序 259
9.5.3  配置MongoDB驅(qū)動(dòng)程序 261
9.5.4  理解ObjectId和ObjectId方法 262
9.5.5  注入一個(gè)文檔 263
9.5.6  獲取所有文檔 265
9.5.7  更新一個(gè)文檔 266
9.5.8  刪除一個(gè)文檔 267
9.6  將MongoDB與Nuxt頁面進(jìn)行集成 268
9.6.1  創(chuàng)建一個(gè)頁面用于添加新用戶 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)建一個(gè)簡(jiǎn)單的存儲(chǔ) 276
10.3  理解Vuex核心概念 277
10.3.1  狀態(tài) 277
10.3.2  getter 280
10.3.3  突變 283
10.3.4  動(dòng)作 285
10.3.5  模塊 287
10.4  構(gòu)建Vuex存儲(chǔ)模塊 293
10.4.1  創(chuàng)建簡(jiǎn)單的存儲(chǔ)模塊結(jié)構(gòu) 293
10.4.2  創(chuàng)建高級(jí)的存儲(chǔ)模塊結(jié)構(gòu) 295
10.5  處理Vuex存儲(chǔ)中的表單 297
10.5.1  使用v-bind和v-on指令 298
10.5.2  使用雙向computed屬性 299
10.6  在Nuxt中使用Vuex存儲(chǔ) 300
10.6.1  使用模塊模式 300
10.6.2  使用模塊文件 304
10.6.3  使用fetch方法 306
10.6.4  使用nuxtServerInit動(dòng)作 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簡(jiǎn)介 326
11.2.1  安裝Vue CLI 326
11.2.2  Vue CLI的項(xiàng)目結(jié)構(gòu) 327
11.2.3  利用Vue CLI編寫中間件和Vuex存儲(chǔ) 329
11.3  在Nuxt中編寫路由中間件 334
11.3.1  編寫全局中間件 335
11.3.2  編寫逐個(gè)路由中間件 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身份驗(yàn)證 351
12.1  理解基于會(huì)話的身份驗(yàn)證 351
12.1.1  會(huì)話和cookie的含義 352
12.1.2  會(huì)話身份驗(yàn)證流 352
12.2  理解基于令牌的身份驗(yàn)證 353
12.2.1  JWT的含義 353
12.2.2  令牌身份驗(yàn)證流 354
12.2.3  針對(duì)JWT使用Node.js模塊 355
12.3  創(chuàng)建后端身份驗(yàn)證 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  針對(duì)Node.js使用bcryptjs模塊 368
12.3.5  針對(duì)Node.js使用mysql模塊 369
12.3.6  重構(gòu)服務(wù)器端上的登錄代碼 372
12.3.7  驗(yàn)證服務(wù)器端上的輸入令牌 374
12.4  創(chuàng)建前端身份驗(yàn)證 375
12.4.1  在（Nuxt）客戶端上使用cookie 377
12.4.2  在（Nuxt）服務(wù)器端使用cookie 378
12.5  利用Google OAuth進(jìn)行簽名 379
12.5.1  向后端身份驗(yàn)證中添加Google OAuth 380
12.5.2  針對(duì)Google OAtuh創(chuàng)建前端身份驗(yàn)證 384
12.6  本章小結(jié) 387
第5部分  測(cè)試和開發(fā)
第13章  編寫端到端測(cè)試 391
13.1  端到端測(cè)試和單元測(cè)試 391
13.2  端到端測(cè)試工具 392
13.2.1  jsdom 392
13.2.2  AVA 395
13.3  利用jsdom和AVA編寫Nuxt應(yīng)用程序測(cè)試 397
13.4  Nightwatch簡(jiǎn)介 400
13.5  利用Nightwatch編寫Nuxt應(yīng)用程序測(cè)試 404
13.6  本章小結(jié) 406
第14章  Linter、格式化程序和部署命令 407
14.1  Linter簡(jiǎn)介—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)用程序中分別運(yùn)行ESLint和Prettier 422
14.4  部署Nuxt應(yīng)用程序 424
14.4.1  部署一個(gè)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)站點(diǎn)托管服務(wù)器上托管Nuxt靜態(tài)生成的應(yīng)用程序 430
14.5  本章小結(jié) 431
第6部分  高 級(jí) 內(nèi) 容
第15章  利用Nuxt創(chuàng)建一個(gè)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動(dòng)作 439
15.3.2  利用插件創(chuàng)建多個(gè)自定義Axios實(shí)例 441
15.4  部署Nuxt SPA 444
15.5  本章小結(jié) 450
第16章  為Nuxt創(chuàng)建一個(gè)框架無關(guān)的PHP API 451
16.1  PHP簡(jiǎn)介 451
16.1.1  安裝或升級(jí)PHP 452
16.1.2  配置PHP 453
16.1.3  利用內(nèi)建PHP Web服務(wù)器運(yùn)行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—自動(dòng)加載器 465
16.2.4  PSR-7—HTTP消息接口 469
16.2.5  HTTP服務(wù)器請(qǐng)求處理程序（請(qǐng)求處理程序） 473
16.2.6  PSR-15—HTTP服務(wù)器請(qǐng)求處理程序（中間件） 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)建一個(gè)實(shí)時(shí)應(yīng)用程序 497
17.1  RethinkDB簡(jiǎn)介 497
17.1.1  安裝RethinkDB Server 497
17.1.2  ReQL簡(jiǎn)介 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簡(jiǎn)介 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)建個(gè)頁面 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簡(jiǎn)介 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簡(jiǎn)介 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

技術(shù)需求

本書需要使用最新版本的Nuxt.js。本書中的全部代碼均在Ubuntu 20.10上通過Nuxt 2.14.x進(jìn)行測(cè)試。下表列出了本書所需的軟件、框架和技術(shù)列表。

本書所需的軟件和硬件 操作系統(tǒng)環(huán)境

• Koa.js v2.13.0 任意平臺(tái)
• Axios v0.19.2 任意平臺(tái)
• Keystone.js v11.2.0 任意平臺(tái)
• Socket.IO v2.3.0 任意平臺(tái)
• MongoDB v4.2.6 任意平臺(tái)
• MySQL v10.3.22-MariaDB 任意平臺(tái)
• RethinkDB v2.4.0 任意平臺(tái)
• PHP v7.4.5 任意平臺(tái)
• Foundation v6.6.3 任意平臺(tái)
• Swiper.js v6.0.0 任意平臺(tái)
• Node.js v12.18.2 LTS（至少為v8.9.0） 任意平臺(tái)
• NPM v6.14.7 任意平臺(tái)

下載示例代碼文件

讀者可訪問www.packt.com并通過個(gè)人賬戶下載本書的示例代碼文件。無論讀者在何處購買了本書，均可訪問www.packt.com/support，經(jīng)注冊(cè)后我們會(huì)將相關(guān)文件直接通過電子郵件的方式發(fā)送給您。

下載代碼文件的具體操作步驟如下。

（1）訪問www.packt.com并注冊(cè)。

（2）選擇SUPPORT選項(xiàng)卡。

（3）單擊Code Downloads & Errata。

（4）在Search搜索框中輸入書名。文章來源地址http://www.zghlxwxcb.cn/news/detail-754649.html

到了這里，關(guān)于Nuxt.js：下一代Web開發(fā)框架的革命性力量的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！