透過 100 多個技巧的集合來學習 Nuxt!

簡介

Nuxt 的目標是以絕佳的開發者體驗為考量,使網頁開發直觀且高效能。

Nuxt 是一個免費且開源框架,它提供直觀且可擴展的方式來使用 Vue.js 建立類型安全、高效能且生產級的全端網頁應用程式和網站。

我們已將一切準備就緒,因此您可以從一開始就開始撰寫 .vue 檔案,同時享受開發中的熱模組替換,以及預設使用伺服器端渲染的生產級高效能應用程式。

Nuxt 沒有供應商鎖定,讓您可以將您的應用程式部署到任何地方,甚至是邊緣運算

如果您想在瀏覽器中試用 Nuxt,可以在我們的線上沙箱之一中試用

自動化和慣例

Nuxt 使用慣例和有主見的目錄結構來自動執行重複性任務,並讓開發人員專注於推動功能。設定檔仍然可以自訂並覆寫其預設行為。

  • 基於檔案的路由:根據 pages/ 目錄的結構定義路由。這可以更輕鬆地組織您的應用程式,並避免手動路由設定的需求。
  • 程式碼分割:Nuxt 會自動將您的程式碼分割成較小的區塊,這有助於減少應用程式的初始載入時間。
  • 開箱即用的伺服器端渲染:Nuxt 具有內建的 SSR 功能,因此您無需自行設定單獨的伺服器。
  • 自動匯入:將 Vue composables 和元件寫入其各自的目錄中,然後使用它們,無需匯入它們,即可享有 tree-shaking 和最佳化的 JS 套件的好處。
  • 資料獲取實用工具:Nuxt 提供 composables 來處理與 SSR 相容的資料獲取,以及不同的策略。
  • 零配置 TypeScript 支援:使用我們自動產生的類型和 tsconfig.json 撰寫類型安全的程式碼,而無需學習 TypeScript。
  • 已設定的建置工具:我們預設使用 Vite 來支援開發中的熱模組替換 (HMR),並使用內建的最佳實務來捆綁您的程式碼以進行生產。

Nuxt 會處理這些問題,並提供前端和後端功能,因此您可以專注於重要事項:建立您的網頁應用程式

伺服器端渲染

Nuxt 預設內建伺服器端渲染(SSR)功能,無需自行配置伺服器,這對 Web 應用程式有許多好處

  • 更快的初始頁面載入時間: Nuxt 會將完整渲染的 HTML 頁面傳送到瀏覽器,可以立即顯示。這可以提供更快的感知頁面載入時間和更好的使用者體驗 (UX),尤其是在較慢的網路或裝置上。
  • 改善 SEO:搜尋引擎可以更好地索引 SSR 頁面,因為 HTML 內容可以立即使用,而不需要 JavaScript 在客戶端渲染內容。
  • 在低功耗裝置上更好的效能:它可以減少需要在客戶端下載和執行的 JavaScript 數量,這對於可能難以處理大量 JavaScript 應用程式的低功耗裝置來說是有益的。
  • 更好的可訪問性:內容在初始頁面載入時立即可用,提高了依賴螢幕閱讀器或其他輔助技術的使用者的可訪問性。
  • 更容易快取:頁面可以在伺服器端快取,這可以通過減少產生和向客戶端傳送內容所需的時間來進一步提高效能。

總體而言,伺服器端渲染可以提供更快、更有效率的使用者體驗,並改善搜尋引擎最佳化和可訪問性。

由於 Nuxt 是一個多功能的框架,它讓您可以將整個應用程式靜態渲染到靜態託管,使用 nuxt generate,使用 ssr: false 選項全域停用 SSR,或透過設定 routeRules 選項來利用混合渲染。

請閱讀Nuxt 渲染模式以了解更多資訊。

伺服器引擎

Nuxt 伺服器引擎 Nitro 解鎖了新的全端功能。

在開發中,它使用 Rollup 和 Node.js worker 來處理您的伺服器程式碼和上下文隔離。它還會透過讀取 server/api/ 中的檔案以及 server/middleware/ 中的伺服器中介軟體來產生伺服器 API。

在生產環境中,Nitro 會將您的應用程式和伺服器建置到一個通用的 .output 目錄中。此輸出很精簡:已縮小並從任何 Node.js 模組中移除(polyfill 除外)。您可以在任何支援 JavaScript 的系統上部署此輸出,從 Node.js、Serverless、Workers、Edge-side rendering 或純靜態。

請閱讀Nuxt 伺服器引擎以了解更多資訊。

已準備好用於生產環境

Nuxt 應用程式可以部署在 Node 或 Deno 伺服器上,預先渲染以託管在靜態環境中,或部署到無伺服器和邊緣供應商。

請閱讀部署章節以了解更多資訊。

模組化

模組系統允許使用自訂功能和與第三方服務的整合來擴充 Nuxt。

請閱讀Nuxt 模組概念以了解更多資訊。

架構

Nuxt 由不同的核心套件組成

我們建議您閱讀每個概念,以全面了解 Nuxt 的功能和每個套件的範圍。