哈囉，大家好！經過前面的努力，我們已經成功建立了 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 進一步美化介面，提升使用者體驗。
讓我們繼續保持熱情，迎接接下來的挑戰吧！相信透過不斷的學習和實踐，我們都能成為更好的開發者。
如果你喜歡這篇文章，歡迎分享給更多人。我們下次見！
