D17 - 探索 Nuxt 前端結構：深入理解 app.vue 與 layouts/default.vue

哈囉，大家好！經過前面的努力，我們已經成功建立了 Nuxt 的開發環境，並初步了解了它的使用方式。在前一篇文章中，我們建立了第一個頁面，並準備好了後續開發所需的套件。現在，是時候深入了解 Nuxt 的前端結構，並開始規劃我們的應用介面了。

今天，我想和大家分享 Nuxt 前端結構與介面規劃，特別是 app.vue 和 layouts/default.vue 之間的關係，以及它們在應用程式中的作用。

一、Nuxt 前端結構概覽

在開始規劃介面之前，理解 Nuxt 的前端結構是非常重要的。Nuxt 以約定大於配置的理念，提供了清晰的目錄結構，讓我們可以更專注於開發本身。

1. 目錄結構回顧

• pages/：存放頁面組件，Nuxt 會自動根據這裡的檔案生成路由。
• layouts/：用於定義頁面的佈局，例如導航列、頁腳等。
• components/：存放可重用的 Vue 元件。
• plugins/：用於註冊需要在 Vue 實例化之前執行的插件。
• nuxt.config.js：Nuxt 的主要配置檔案。

2. 關鍵檔案介紹

在 Nuxt 中，app.vue 和 layouts/default.vue 是控制應用程式結構的兩個關鍵檔案。理解它們的作用，能夠讓我們更有效地規劃介面。

二、深入理解 app.vue 與 layouts/default.vue

1. app.vue 的作用

app.vue 是 Nuxt 應用的 全域根組件，它位於整個應用的最外層。所有的頁面和佈局都會被包裹在 app.vue 中。

• 全域設定：如果你需要對應用的所有部分統一添加一些全域設定（如 、 的全域樣式或腳本），app.vue 是放置這些內容的地方。
• 結構控制：app.vue 控制整個應用的頂層結構，可以在這裡引入全域性的組件或設置。
  範例：簡單的 app.vue 文件

<template>
  <div id="app">
    <NuxtLayout />
  </div>
</template>

<script setup>
// 這裡可以加入全域性的組件或邏輯
</script>

<style>
/* 全域樣式 */
</style>

在這個範例中， 用來渲染對應的佈局，例如 layouts/default.vue。這意味著每個頁面都會被指定的佈局包裹。

2. layouts/default.vue 的作用

layouts/default.vue 是應用的 預設佈局。如果某個頁面沒有指定特殊的佈局，Nuxt 會自動使用 default 佈局。layouts/default.vue 主要用來定義應用中大多數頁面的佈局，例如導航列、側邊欄、頁腳等。

• 頁面佈局：在這裡可以統一設計頁面的結構，包含重複出現的部分。
• 內容插槽：使用 元件來渲染頁面的內容。
  範例：簡單的 layouts/default.vue

<template>
  <div>
    <Header /> <!-- 自訂的導航列元件 -->
    <main>
      <NuxtPage />
    </main>
    <Footer /> <!-- 自訂的頁腳元件 -->
  </div>
</template>

<script setup>
// 可以在這裡引入共用的元件
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'
</script>

<style scoped>
/* 佈局專屬的樣式 */
</style>

在這個範例中，我們在佈局中引入了 Header 和 Footer 元件，並使用 來渲染頁面的具體內容。

3. 主要區別

• app.vue 是全域的根組件：它包裹了整個應用程式，所有佈局、頁面、插件等都會被包含在 app.vue 中。它相當於 Nuxt 應用的基礎架構。
• layouts/default.vue 是頁面的佈局：控制頁面在此佈局下的顯示方式。如果你有多個佈局，可以根據頁面需求來切換不同的佈局。

4. 使用情境

• 全域設定或全域元件：使用 app.vue，例如全域的樣式、插件或狀態管理工具的初始化。
• 頁面佈局和結構：使用 layouts/default.vue，例如設置導航列、側邊欄、頁腳等。

三、規劃應用程式的介面結構

了解了 app.vue 和 layouts/default.vue 的作用後，我們可以開始規劃我們的應用介面。

1. 設計全域元件

首先，我們可以在 components/ 目錄下建立一些全域性的元件，例如：

• Header.vue：導航列，包含網站的 LOGO 和主要導航連結。
• Footer.vue：頁腳，包含版權資訊和相關連結。
• Sidebar.vue（可選）：側邊欄，提供額外的導航或功能選項。

範例：建立 Header.vue

<template>
  <header class="bg-blue-600 text-white p-4">
    <nav class="container mx-auto flex justify-between">
      <h1 class="text-xl font-bold">財務管理系統</h1>
      <ul class="flex space-x-4">
        <li><NuxtLink to="/">首頁</NuxtLink></li>
        <li><NuxtLink to="/transactions">交易紀錄</NuxtLink></li>
        <li><NuxtLink to="/accounts">銀行帳戶</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

<script setup>
// 這裡暫時不需要特別的邏輯
</script>

<style scoped>
/* Header 專屬的樣式 */
</style>

2. 更新 layouts/default.vue

將我們的全域元件整合到預設佈局中。

<template>
  <div>
    <Header />
    <main class="container mx-auto py-4">
      <NuxtPage />
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'
</script>

<style scoped>
/* 佈局專屬的樣式 */
</style>

3. 規劃頁面結構

在 pages/ 目錄下，我們可以建立以下頁面：

• index.vue：首頁，簡單介紹應用程式或展示摘要資訊。
• transactions.vue：交易紀錄頁面，列出所有交易。
• accounts.vue：銀行帳戶頁面，管理銀行帳戶資訊。

4. 使用組件與佈局

在各個頁面中，我們可以使用組件來組合內容，確保程式碼的重用性和維護性。

範例：更新 pages/transactions.vue

<template>
  <div>
    <h2 class="text-2xl font-bold mb-4">交易紀錄</h2>
    <TransactionList />
  </div>
</template>

<script setup>
import TransactionList from '~/components/TransactionList.vue'
</script>

<style scoped>
/* 頁面專屬的樣式 */
</style>

四、個人建議

• 善用佈局：利用 layouts 來統一管理頁面的結構，減少重複的程式碼。
• 拆分組件：將可重用的部分拆分成組件，放在 components/ 目錄下。
• 清晰的目錄結構：按照 Nuxt 的約定，將檔案放在正確的目錄，讓專案結構清晰明瞭。
• 全域與局部的區分：將全域性的設定和元件放在 app.vue 或全域的插件中，局部的內容則放在對應的佈局或頁面中。

小結

透過對 app.vue 和 layouts/default.vue 的深入理解，我們可以更有效地規劃 Nuxt 應用的前端結構。這不僅有助於提升開發效率，還能讓程式碼更加易於維護。

記住，良好的結構設計是成功專案的基石。透過合理地利用框架提供的功能，我們可以打造出高品質、可維護的應用程式。

Next

今天，我們深入了解了 Nuxt 的前端結構，並規劃了應用程式的介面。接下來，我們將：

• 整合後端 API：實現與 Laravel 後端的資料互動，讓應用程式具有實際功能。
• 處理身份驗證：實作登入、註冊功能，保護使用者資料。
• 優化使用者介面：使用 Tailwind CSS 進一步美化介面，提升使用者體驗。

讓我們繼續保持熱情，迎接接下來的挑戰吧！相信透過不斷的學習和實踐，我們都能成為更好的開發者。

如果你喜歡這篇文章，歡迎分享給更多人。我們下次見！