介紹

Nuxt 的目標是透過卓越的開發者體驗，使 Web 開發直觀且高效能。

Nuxt 是一個免費且開源框架它提供了一種直觀且可擴充套件的方式，以建立型別安全、高效能和生產級別的全棧 Web 應用程式和網站，並使用Vue.js.

我們已做好一切，讓您可以從一開始就編寫 .vue 檔案，同時在開發中享受熱模組替換，並在生產中預設透過伺服器端渲染獲得高效能應用程式。

Nuxt 沒有廠商鎖定，允許您在任何地方部署您的應用程式，甚至在邊緣。

如果您想在瀏覽器中試用 Nuxt，您可以在我們的線上沙盒中試用。

自動化和約定

Nuxt 使用約定和規範的目錄結構來自動化重複性任務，讓開發者專注於推出新功能。配置檔案仍然可以自定義和覆蓋其預設行為。

  • 基於檔案的路由： 根據您的 app/pages/ 目錄的結構定義路由。這可以使組織您的應用程式更容易，並避免手動路由配置的需要。
  • 程式碼分割： Nuxt 自動將您的程式碼分割成更小的塊，這有助於減少應用程式的初始載入時間。
  • 開箱即用的伺服器端渲染： Nuxt 附帶內建的 SSR 功能，因此您無需自己設定單獨的伺服器。
  • 自動匯入： 在各自的目錄中編寫 Vue 可組合函式和元件，無需匯入即可使用，並受益於搖樹最佳化和最佳化的 JS 包。
  • 資料獲取實用程式： Nuxt 提供可組合函式來處理相容 SSR 的資料獲取以及不同的策略。
  • 零配置 TypeScript 支援： 透過我們自動生成的型別和 tsconfig.json，無需學習 TypeScript 即可編寫型別安全的程式碼。
  • 配置的構建工具： 我們預設使用Vite來支援開發中的熱模組替換（HMR）以及將您的程式碼打包用於生產，並內建最佳實踐。

Nuxt 負責這些，並提供前端和後端功能，讓您可以專注於最重要的事情：建立您的 Web 應用程式。

伺服器端渲染

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 模組（除了 polyfills）。您可以將此輸出部署到任何支援 JavaScript 的系統上，包括 Node.js、Serverless、Workers、邊緣渲染或純靜態環境。

閱讀更多關於Nuxt 伺服器引擎。

生產就緒

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

閱讀更多關於部署部分。

模組化

模組系統允許您透過自定義功能和與第三方服務的整合來擴充套件 Nuxt。

閱讀更多關於Nuxt 模組概念。

架構

Nuxt 由不同的核心包:

我們建議閱讀每個概念，以全面瞭解 Nuxt 的功能和每個包的範圍。