Vue.js 開發

Nuxt 整合了 Vue 3，這是 Vue 的新主要版本，為 Nuxt 使用者啟用新的模式。

Nuxt 一直以來都使用 Vue 作為前端框架。

我們選擇在 Vue 的基礎上建構 Nuxt 的原因如下

• Vue 的響應式模型，其中資料的變更會自動觸發介面的變更。
• 基於元件的樣板，同時保持 HTML 作為 Web 的通用語言，可啟用直觀的模式，以保持介面的一致性，同時又具有強大的功能。
• 從小型專案到大型 Web 應用程式，Vue 都能保持良好的規模效能，以確保您的應用程式持續為使用者提供價值。

Vue with Nuxt

單檔案元件

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

自動匯入

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

Vue Router

大多數應用程式都需要多個頁面以及在它們之間導航的方式。這稱為「路由」。Nuxt 使用 pages/ 目錄和命名慣例，以使用官方的 Vue Router 函式庫直接建立對應至您的檔案的路由。

與 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 gzip。

組合式 API

在 Vue 2 中，為元件提供資料和邏輯的唯一方法是透過 Options API，它允許您使用預先定義的屬性（如 data 和 methods）將資料和方法傳回至樣板

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

Vue 3 中引入的 組合式 API 並非 Options API 的替代品，但它可在整個應用程式中實現更好的邏輯重複使用，並且是透過在複雜元件中關聯來對程式碼進行分組的更自然的方式。

與 <script> 定義中的 setup 關鍵字搭配使用，以下是使用組合式 API 和 Nuxt 3 自動匯入的響應式 API 重新編寫的上述元件

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

Nuxt 的目標是圍繞組合式 API 提供絕佳的開發人員體驗。

• 使用 Vue 中自動匯入的 響應式函式和 Nuxt 內建的組合式函式。
• 在 composables/ 目錄中撰寫您自己的自動匯入的可重複使用函式。

TypeScript 支援

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