建立 Nuxt.js 項(xiàng)目

首先，請(qǐng)確保您已經(jīng)安裝了 Node.js 和 YARN 或 NPM。然後，透過(guò)命令列建立一個(gè)新的 Nuxt.js 專案：

在建立過(guò)程中，您可以選擇是否需要UI框架、預(yù)處理器等選項(xiàng)，並根據(jù)需要進(jìn)行設(shè)定。

目錄結(jié)構(gòu)

Nuxt.js遵循特定的目錄結(jié)構(gòu)，部分關(guān)鍵目錄如下：

• .nu??xt/：該目錄是自動(dòng)產(chǎn)生的，包含編譯後的程式碼。一般不需要直接修改。
• asset/：存放未編譯的靜態(tài)資源，如CSS、JavaScript、圖片等。 Nuxt.js 將在建置期間處理這些資源。
• Components/：儲(chǔ)存可以在應(yīng)用程式的不同部分重複使用的自訂 Vue 元件。
• layouts/：定義頁(yè)面的佈局?？梢杂幸粋€(gè)預(yù)設(shè)佈局或多個(gè)特定佈局。
• page/：每個(gè)檔案對(duì)應(yīng)一個(gè)路由，檔案名稱就是路由名。動(dòng)態(tài)路由用方括號(hào)[]表示。
• middleware/: 放置自訂中間件，可以在頁(yè)面渲染前後執(zhí)行邏輯。
• plugins/: Vue.js 插件的自訂入口檔案。
• static/：不做任何處理，直接複製到建置輸出目錄，常用於存放robots.txt或favicon.ico等
• store/：Vuex 狀態(tài)管理目錄，儲(chǔ)存 actions、mutations、getters 以及整個(gè) store 的入口檔案。
• nuxt.config.js：Nuxt.js設(shè)定文件，用於自訂專案設(shè)定。
• package.json：專案依賴和腳本配置。
• yarn.lock 或 npm.lock：記錄專案依賴的準(zhǔn)確版本，以確保不同環(huán)境下依賴的一致性。

頁(yè)面渲染

在pages/目錄下建立一個(gè)index.vue檔。這是應(yīng)用程式的主頁(yè)：

Nuxt.js頁(yè)面渲染的過(guò)程分為兩個(gè)主要階段：伺服器端渲染（SSR）和客戶端渲染（CSR）。以下是Nuxt.js頁(yè)面渲染的詳細(xì)步驟：

初始化：

使用者在瀏覽器中輸入U(xiǎn)RL並向伺服器發(fā)送請(qǐng)求。

伺服器收到請(qǐng)求後，開(kāi)始處理。

路線解析度：

Nuxt.js 使用 nuxt.config.js 中的路由設(shè)定（如果存在）或自動(dòng)從pages/目錄產(chǎn)生路由。

辨識(shí)對(duì)應(yīng)的頁(yè)面文件，如pages/index.vue或pages/about.vue。

資料預(yù)?。?

Nuxt.js 在頁(yè)面元件中尋找 asyncData 或 fetch 方法（如果存在）。

這些方法將在伺服器端運(yùn)行，以從 API 或其他資料來(lái)源取得資料。

取得到資料後，會(huì)序列化並注入到頁(yè)面範(fàn)本中

模板渲染：

Nuxt.js 使用 Vue.js 的渲染引擎將元件和預(yù)先取的資料轉(zhuǎn)換為 HTML 字串。
HTML 字串包含客戶端所需的所有初始數(shù)據(jù)，內(nèi)嵌在 <script> 中。 JSON 格式的標(biāo)籤。 </script>

返回 HTML：

伺服器將產(chǎn)生的 HTML 回應(yīng)傳回客戶端（瀏覽器）。

客戶端初始化：

瀏覽器收到 HTML 後，開(kāi)始解析並執(zhí)行內(nèi)嵌 JavaScript。
Nuxt.js 用戶端程式庫(kù) (nuxt.js) 已載入並初始化。

客戶端渲染：

客戶端程式庫(kù)接管渲染，建立 Vue.js 實(shí)例，並將資料從內(nèi)嵌 JSON 注入到 Vue 實(shí)例中。
頁(yè)面完成初始渲染，使用者可以看到完整的頁(yè)面內(nèi)容。
此時(shí)，頁(yè)面是互動(dòng)的，使用者可以觸發(fā)事件並進(jìn)行導(dǎo)航。

後續(xù)導(dǎo)航：

當(dāng)使用者導(dǎo)覽到其他頁(yè)面時(shí)，Nuxt.js 使用客戶端路由（Vue Router）進(jìn)行無(wú)刷新跳轉(zhuǎn)。
如果新頁(yè)面需要數(shù)據(jù)，則 asyncData 或 fetch 方法將在用戶端運(yùn)行，獲取新數(shù)據(jù)並更新視圖。

SSG（靜態(tài)站點(diǎn)產(chǎn)生）：

在開(kāi)發(fā)之外，您可以使用 nuxtgenerate 指令產(chǎn)生靜態(tài) HTML 檔案。

每個(gè)頁(yè)面都將預(yù)先渲染為一個(gè)單獨(dú)的 HTML 文件，其中包含所有必要的資料和資源。

使用非同步數(shù)據(jù)

asyncData 方法是 Nuxt.js 獨(dú)有的，可讓您在伺服器上預(yù)取資料並在客戶端上重複使用它。在上面的範(fàn)例中，我們只是更改了 message 的值，但在實(shí)際應(yīng)用中，您可能會(huì)在這裡呼叫 API 來(lái)取得資料。

中介軟體

中介軟體（Middleware）是一個(gè)功能，讓你在路由改變之前和之後執(zhí)行特定的邏輯。中間件可以在全域、頁(yè)面層級(jí)或版面配置層級(jí)使用，以處理驗(yàn)證、資料預(yù)載、路由防護(hù)等任務(wù)。

1. 全域中介軟體

全域中間件在 nuxt.config.js 檔案中配置，並影響應(yīng)用程式中的所有頁(yè)面：

中介軟體通常位於middleware/目錄下，如middleware/globalMiddleware1.js：

2.頁(yè)面級(jí)中間件

頁(yè)面層級(jí)中間件僅影響特定頁(yè)面。在頁(yè)面元件中聲明中間件：

對(duì)應(yīng)的中間件檔案位於middleware/目錄下，例如middleware/pageMiddleware.js：

3.版面級(jí)中間件

佈局級(jí)中間件與頁(yè)面層級(jí)類似，但它適用於所有使用版面的頁(yè)面。在版面元件中宣告中間件：

對(duì)應(yīng)的中間件檔案位於middleware/目錄：

中介軟體上下文

中間件函數(shù)接收一個(gè)上下文物件作為參數(shù)，其中包含以下屬性：

• req（HTTP請(qǐng)求對(duì)象，僅在伺服器端有效）

• res（HTTP回應(yīng)對(duì)象，僅在伺服器端有效）

• redirect（用於重定向的函數(shù)）

• app（Vue 實(shí)例）

• 路線（目前路線資訊）

• store（Vuex 商店，如果啟用）

• payload（如果有asyncData回傳的資料）

中介軟體可以依序執(zhí)行，每個(gè)中間件都可以透過(guò)重定向功能決定是繼續(xù)執(zhí)行鏈中的下一個(gè)中介軟體還是中斷路由。

動(dòng)態(tài)路由

Nuxt.js支援動(dòng)態(tài)路由，這對(duì)於處理部落格文章、使用者個(gè)人資料等具有動(dòng)態(tài)ID的內(nèi)容非常有用。在pages/目錄中建立動(dòng)態(tài)路由文件，例如[id].vue:

這裡的[id]代表一個(gè)動(dòng)態(tài)參數(shù)，asyncData會(huì)自動(dòng)處理這個(gè)參數(shù)並取得對(duì)應(yīng)ID的部落格文章。

版面
佈局可讓您定義全域或特定頁(yè)面的通用結(jié)構(gòu)。在layouts/目錄下建立default.vue檔案：

預(yù)設(shè)情況下，所有頁(yè)面都將使用此佈局。如果你想為特定頁(yè)面設(shè)定不同的佈局，可以在頁(yè)面元件中指定：

外掛程式和函式庫(kù)整合
Nuxt.js 支援 Vue.js 插件，您可以在 nuxt.config.js 中設(shè)定：

然後在plugins/目錄下建立對(duì)應(yīng)的文件，如vuetify.js：

配置與最佳化

Nuxt.js 設(shè)定檔 (nuxt.config.js)

nuxt.config.js 是 Nuxt 應(yīng)用程式的主要設(shè)定文件，用於自訂應(yīng)用程式的行為。以下是一些常用的配置：

• mode：設(shè)定應(yīng)用程式的運(yùn)作模式。可選值為'spa'（單頁(yè)應(yīng)用）、'universal'（伺服器端渲染）和'static'（靜態(tài)生成）。預(yù)設(shè)為“通用”。
• head：設(shè)定頁(yè)面的部分，如標(biāo)題、元資料、連結(jié)等
• css：指定全域CSS文件，可以是文件路徑數(shù)組
• build：配置建置過(guò)程，例如transpile、extractCSS、extend等。例如，您可以在此處新增Babel插件或調(diào)整Webpack設(shè)定。
• router：自訂路由配置，如基本路徑、模式等
• axios：配置axios模組，包括基礎(chǔ)URL、代理設(shè)定等
• plugins：註冊(cè)全域Vue插件，可以指定在客戶端或服務(wù)端載入。
• modules：載入外部模組，如@nuxtjs/axios、@nuxtjs/proxy等
• env：定義環(huán)境變量，該變數(shù)將在建置時(shí)注入到客戶端和伺服器中。

優(yōu)化策略

• 非同步資料預(yù)?。╝syncData/fetch）：使用asyncData或fetch方法在伺服器端預(yù)取數(shù)據(jù)，以減輕客戶端渲染的負(fù)擔(dān)。
• 程式碼分割：Nuxt.js 自動(dòng)分割程式碼，確保只有在存取路由時(shí)才載入相關(guān)程式碼。
• 靜態(tài)網(wǎng)站產(chǎn)生（SSG）：使用 nuxtgenerate 指令產(chǎn)生靜態(tài) HTML 文件，適合內(nèi)容變更不頻繁的站點(diǎn)，提高載入速度和 SEO 友善性。
• 快取策略：使用ETag、Last-Modified等HTTP快取策略，減少重複要求。
• Vue.js 最佳化：確保Vue元件的最佳化，例如避免無(wú)用的watchers、使用v-once減少重新渲染等
• 圖片優(yōu)化：使用正確的圖片格式（如WebP），確保圖片大小合適，使用延遲載入技術(shù)。
• Service Worker：整合 PWA 支援並使用 Service Worker 進(jìn)行離線快取和推播通知。
• Tree Shaking：確保您的依賴項(xiàng)支援 Tree Shaking 以刪除未使用的程式碼。
• 分析與監(jiān)控：使用 nuxt build --analyze 或整合第三方工具（如 Google Lighthouse）進(jìn)行效能分析，持續(xù)監(jiān)控應(yīng)用效能。

靜態(tài)站點(diǎn)產(chǎn)生 (SSG)

Nuxt.js 的靜態(tài)網(wǎng)站產(chǎn)生（SSG）是透過(guò) nuxtgenerate 指令實(shí)現(xiàn)的。該命令遍歷應(yīng)用程式的路由並為每個(gè)路由產(chǎn)生一個(gè)預(yù)先渲染的 HTML 文件，該文件可以直接部署到任何靜態(tài)文件託管服務(wù)。以下是有關(guān) SSG 的一些要點(diǎn)：

1。設(shè)定：在nuxt.config.js檔案中，可以設(shè)定generate選項(xiàng)來(lái)控制靜態(tài)產(chǎn)生的行為：

2。產(chǎn)生：執(zhí)行npm rungenerate或yarngenerate來(lái)啟動(dòng)靜態(tài)產(chǎn)生過(guò)程。 Nuxt.js會(huì)根據(jù)generate.routes中的設(shè)定產(chǎn)生對(duì)應(yīng)的HTML檔。如果沒(méi)有明確定義，會(huì)自動(dòng)掃描pages/目錄下的所有檔案產(chǎn)生路由。

3。資料預(yù)取：在頁(yè)面元件中，可以使用asyncData或fetch方法來(lái)預(yù)取資料。這些資料會(huì)在產(chǎn)生靜態(tài)頁(yè)面時(shí)注入到 HTML 中，這樣客戶端載入時(shí)頁(yè)面不需要額外的請(qǐng)求：

4。中間件處理：SSG過(guò)程中不會(huì)執(zhí)行伺服器端中間件，因?yàn)镾SG在沒(méi)有伺服器環(huán)境的情況下產(chǎn)生靜態(tài)檔案。因此，如果生成時(shí)需要執(zhí)行一些邏輯，最好在 asyncData 或 fetch 中處理。

5。部署：產(chǎn)生的靜態(tài)檔案可以部署到任何靜態(tài)檔案託管服務(wù)，例如 Netlify、Vercel、GitHub Pages 或 AWS S3。這些服務(wù)通常不需要執(zhí)行任何伺服器端程式碼，只需上傳產(chǎn)生的 dist 資料夾即可。

6。 SEO 優(yōu)化：SSG 改進(jìn)了 SEO，因?yàn)樗褜ひ媾老x可以讀取預(yù)先渲染的 HTML 內(nèi)容，而無(wú)需等待 JavaScript 執(zhí)行。

7。動(dòng)態(tài)路由：對(duì)於動(dòng)態(tài)路由，Nuxt.js 將嘗試產(chǎn)生所有可能的組合。如果無(wú)法預(yù)測(cè)所有可能的動(dòng)態(tài)路由，可以在generate.routes中手動(dòng)指定，或使用generate.includePaths和generate.excludePaths進(jìn)行控制。

8。 404頁(yè)：將generate.fallback設(shè)定為true將為未預(yù)先渲染的動(dòng)態(tài)路由產(chǎn)生404頁(yè)面。當(dāng)使用者存取這些路由時(shí)，Nuxt.js 會(huì)嘗試在客戶端渲染它們。

執(zhí)行 nuxtgenerate 指令，Nuxt.js 將產(chǎn)生靜態(tài) HTML 檔案。

驗(yàn)證和錯(cuò)誤處理

驗(yàn)證

驗(yàn)證通常涉及表單資料或 API 請(qǐng)求的輸入驗(yàn)證。 Nuxt.js 本身不會(huì)直接提供驗(yàn)證函式庫(kù)，但你可以整合第三方函式庫(kù)如 Vuelidate、vee-validate，或是使用 TypeScript 進(jìn)行型別檢查。

使用 Vee-Validate
1.安裝：首先需要安裝vee-validate庫(kù)：

2。設(shè)定：在nuxt.config.js中加入Vue外掛程式配置：

3。建立插件：在plugins/vee-validate.js中配置Vee-Validate：

4。用法：在元件中使用 Vee-Validate 進(jìn)行表單驗(yàn)證：

錯(cuò)誤處理

Nuxt.js 提供了多種處理錯(cuò)誤的方法，包括全域錯(cuò)誤處理和特定頁(yè)面的錯(cuò)誤處理。

全域錯(cuò)誤處理

• 自訂錯(cuò)誤頁(yè)面：在layouts目錄下建立error.vue文件，用於自訂錯(cuò)誤頁(yè)面佈局。
• 捕捉全??域錯(cuò)誤：在 nuxt.config.js 中設(shè)定 error 屬性來(lái)擷取全域錯(cuò)誤：

頁(yè)面特定的錯(cuò)誤處理

在頁(yè)面元件中，可以使用asyncData或fetch方法的try-catch結(jié)構(gòu)來(lái)處理錯(cuò)誤：

API 請(qǐng)求錯(cuò)誤處理

對(duì)於API請(qǐng)求，如果使用@nuxtjs/axios模組，可以在請(qǐng)求攔截器中統(tǒng)一處理錯(cuò)誤：

確保在 nuxt.config.js 中註冊(cè)此外掛程式。

Vue生態(tài)系整合

Vue路由器：

Nuxt.js 根據(jù)檔案結(jié)構(gòu)自動(dòng)為您的應(yīng)用程式產(chǎn)生路由系統(tǒng)。路由配置通常不需要手動(dòng)編寫，而是可以透過(guò)nuxt.config.js的router屬性進(jìn)行擴(kuò)充。

視圖：

Nuxt.js 自動(dòng)建立一個(gè) Vuex 儲(chǔ)存。在 store 目錄下，您可以建立模組化狀態(tài)、突變、操作和 getter。例如，建立一個(gè) store/modules/users.js 檔案來(lái)管理使用者資料。

Vue 命令列介面：

Nuxt.js 提供了自己的建置工具，但它也是基於 Vue CLI 的。這表示您可以使用類似 Vue CLI 的命令列工具，例如 npx nuxtgenerate（靜態(tài)產(chǎn)生）或 npxnuxtbuild（建置應(yīng)用程式）。

通天塔：

Nuxt.js 預(yù)設(shè)配置了 Babel 以支援最新的 JavaScript 功能。除非有特殊需要，通常不需要手動(dòng)設(shè)定 Babel。

打字稿：

要使用 TypeScript，請(qǐng)?jiān)?nuxt.config.js 中設(shè)定 typescript: true ，Nuxt.js 將自動(dòng)配置 TypeScript 支援。

ESLint：

為了檢查程式碼質(zhì)量，您可以在專案中安裝 ESLint 並配置 .eslintrc.js。 Nuxt.js 提供 @nuxt/eslint-module 外掛程式來(lái)簡(jiǎn)化整合。

Vue使用：

VueUse 是一個(gè) Vue 使用案例庫(kù)，包含各種實(shí)用功能。要集成，請(qǐng)先安裝@vueuse/core，然後導(dǎo)入並使用元件中的功能。

Vue 插件：

可以透過(guò)nuxt.config.js中的plugins設(shè)定項(xiàng)目全域註冊(cè)Vue插件。例如，整合 Vue Toastify 來(lái)顯示通知：

使用 Nuxt.js 的工作流程

Nuxt.js 提供了完整的開(kāi)發(fā)、建置和部署工作流程。使用 nuxt 命令啟動(dòng)開(kāi)發(fā)伺服器，使用 nuxt build 進(jìn)行生產(chǎn)構(gòu)建，使用 nuxt start 啟動(dòng)生產(chǎn)伺服器，使用 nuxtgenerate 產(chǎn)生靜態(tài)檔案。

效能最佳化

1. 靜態(tài)產(chǎn)生（SSG）：使用nuxtgenerate指令產(chǎn)生預(yù)先渲染的HTML文件，可以大幅提高首屏載入速度，並且對(duì)SEO友善。

2. 程式碼拆分：Nuxt.js 預(yù)設(shè)會(huì)進(jìn)行程式碼拆分，將應(yīng)用程式分成多個(gè)小塊，只載入目前頁(yè)面所需的程式碼，減少初始載入量。

3. 延遲載入：對(duì)於大型應(yīng)用程序，可以考慮延遲載入元件或模組，僅在需要時(shí)載入它們。您可以使用 或 結(jié)合非同步元件來(lái)實(shí)現(xiàn)這一點(diǎn)。

4. 最佳化資源：

• 圖片：使用正確的格式（例如WebP）、壓縮圖片、使用延遲載入（）或使用nuxt-圖片或nuxt- picture 元件。

• CSS：將 CSS 提取到單獨(dú)的檔案並減少內(nèi)聯(lián)樣式。

• JS：使用 Tree Shaking 刪除未使用的程式碼。

1. 非同步資料預(yù)?。菏褂胊syncData或fetch方法預(yù)先載入數(shù)據(jù)，確保渲染前資料準(zhǔn)備就緒。

2. 伺服器端快取：使用 nuxt-ssr-cache 模組快取伺服器端渲染的結(jié)果，減少不必要的 API 呼叫。

3. HTTP快取：設(shè)定正確的快取頭（如Cache-Control），使用瀏覽器快取靜態(tài)資源。

4. 路由守衛(wèi)：使用 beforeRouteEnter 等路由守衛(wèi)以避免在不需要時(shí)載入資料。

5. 減少 HTTP 要求：結(jié)合多個(gè) CSS 和 JS 文件，減少 HTTP 請(qǐng)求數(shù)量。

6. 最佳化API效能：最佳化後端接口，減少回應(yīng)時(shí)間，使用分頁(yè)、過(guò)濾、快取策略。

7. 利用 CDN：在 CDN 上託管靜態(tài)資源，以加快全球用戶的載入速度。

8. 最佳化 Vuex 狀態(tài)管理：避免不必要的運(yùn)算屬性和監(jiān)聽(tīng)器，以減少狀態(tài)變更的開(kāi)銷。

9. 效能審計(jì)：使用Lighthouse、Chrome DevTools或其他效能審計(jì)工具定期檢查應(yīng)用程式效能，並根據(jù)報(bào)告進(jìn)行改進(jìn)。

10. Service Worker：如果適用，整合 PWA 功能並使用 Service Worker 進(jìn)行離線快取和資源預(yù)先載入。

11. 模組最佳化：選擇高效能的第三方模組，並確保它們針對(duì)SSR進(jìn)行了最佳化。

以上是Nuxt.js 實(shí)際應(yīng)用：Vue.js 伺服器端渲染框架的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！