Vue.js 開發

Nuxt 使用 Vue.js，並增加了元件自動匯入、基於檔案的路由以及用於 SSR 友好的組合式函式等功能。

Nuxt 集成了 Vue 3，這是 Vue 的新主要版本，為 Nuxt 使用者帶來了新的模式。

雖然使用 Nuxt 不需要深入瞭解 Vue，但我們建議您閱讀文件並檢視vuejs.org.

上的一些示例。Nuxt 始終將 Vue 作為前端框架。

我們選擇在 Vue 之上構建 Nuxt 是出於以下原因：

  • Vue 的響應式模型，資料中的更改會自動觸發介面中的更改。
  • 基於元件的模板，同時將 HTML 作為網路的通用語言，能夠實現直觀的模式，以保持介面的一致性和強大性。
  • 從小型專案到大型 Web 應用程式，Vue 都能在規模上保持良好的效能，確保您的應用程式持續為使用者提供價值。

Vue 與 Nuxt

單檔案元件

Vue 的單檔案元件（SFC 或 *.vue 檔案）封裝了 Vue 元件的標記 (<template>)、邏輯 (<script>) 和樣式 (<style>)。Nuxt 為 SFC 提供了零配置體驗，並具有熱模組替換 (Hot Module Replacement)，可提供無縫的開發者體驗。

自動匯入

在 Nuxt 專案的 app/components/ 目錄中建立的每個 Vue 元件都無需匯入即可在您的專案中使用。如果元件未在任何地方使用，則您的生產程式碼中將不包含它。

在文件 > 4 X > 指南 > 概念 > 自動匯入中瞭解更多資訊。

Vue Router

大多數應用程式都需要多個頁面以及在它們之間導航的方式。這稱為 路由。Nuxt 使用 app/pages/ 目錄和命名約定，使用官方的Vue Router 庫.

直接建立對映到您的檔案的路由。在 文件 > 4.X > 入門 > 路由 中閱讀更多內容。
在 文件 > 4.X > 示例 > 功能 > 自動匯入 中閱讀並編輯即時示例。

與 Nuxt 2 / Vue 2 的區別

Nuxt 3+ 基於 Vue 3。新的 Vue 主要版本引入了 Nuxt 利用的幾項更改：

  • 更好的效能
  • 組合式 API
  • 支援 TypeScript

更快的渲染

Vue 虛擬 DOM (VDOM) 已從頭重寫，可實現更好的渲染效能。此外，在使用編譯後的單檔案元件時，Vue 編譯器可以透過分離靜態和動態標記在構建時進一步最佳化它們。

這導致更快的首次渲染（元件建立）和更新，以及更少的記憶體使用。在 Nuxt 3 中，它還支援更快的伺服器端渲染。

更小的包體積

在 Vue 3 和 Nuxt 3 中，重點放在減小包體積上。在版本 3 中，Vue 的大部分功能，包括模板指令和內建元件，都是可搖樹最佳化的。如果您不使用它們，您的生產包將不包含它們。

這樣，一個最小的 Vue 3 應用程式可以減小到 12 kb（gzipped 壓縮後）。

組合式 API

在 Vue 2 中，向元件提供資料和邏輯的唯一方法是透過選項 API，它允許您使用 data 和 methods 等預定義屬性將資料和方法返回到模板中。

<script>
export default {
  data () {
    return {
      count: 0,
    }
  },
  methods: {
    increment () {
      this.count++
    },
  },
}
</script>

用於格式化的組合式 API在 Vue 3 中引入的組合式 API 並不是選項 API 的替代品，但它可以在整個應用程式中更好地重用邏輯，並且是更自然的方式來在複雜元件中按關注點分組程式碼。

與 <script> 定義中的 setup 關鍵字一起使用，這是使用組合式 API 和 Nuxt 3 自動匯入的響應式 API 重寫的上述元件：

components/Counter.vue
<script setup lang="ts">
const count = ref(0)
const increment = () => count.value++
</script>

Nuxt 的目標是圍繞組合式 API 提供出色的開發者體驗。

TypeScript 支援

Vue 3 和 Nuxt 3+ 都用 TypeScript 編寫。一個完全型別化的程式碼庫可以防止錯誤並記錄 API 使用。這並不意味著您必須用 TypeScript 編寫應用程式才能利用它。使用 Nuxt 3，您可以透過將檔案從 .js 重新命名為 .ts 來選擇使用，或者在元件中新增 <script setup lang="ts">。

閱讀有關 Nuxt 中 TypeScript 的詳細資訊