本章將介紹 Nuxt 的 Layout 系統，讓你的應用能夠使用不同的版型配置。
1 核心概念
Layout 就像是手機的「保護殼」。
•你的頁面內容 (pages/*.vue) 是手機本體。
•你可以隨時換不同的殼 (layouts/*.vue)。
結構變化：
Before (Lesson 4)
app.vue 裡面寫死了 Header + Page + Footer。
After (Lesson 5)
app.vue 變成一個單純的「容器」，只負責呼叫 <NuxtLayout>，由 Layout 決定要長什麼樣子。
2 給 Claude Code 的中文指令 Prompt
我們要進行一次「重構 (Refactor)」，並新增一個特殊的橘色版型來測試切換功能。
請複製以下指令給 Claude：
請幫我重構專案以使用 Layouts 版型系統：
- 建立
app/layouts/資料夾。 - 建立預設版型
app/layouts/default.vue：- 將原本
app/app.vue裡的<AppHeader />和<AppFooter />搬過來這裡。 - 在 Header 和 Footer 中間，放入
<slot />元件（這是用來顯示頁面內容的關鍵位置）。
- 將原本
- 清理
app/app.vue：- 移除所有 HTML，只保留
<NuxtLayout>包裹著<NuxtPage />。
- 移除所有 HTML，只保留
- 建立一個特殊版型
app/layouts/orange.vue：- 給它一個簡單的 style，讓背景變成橘色或加上橘色邊框。
- 這個版型不要包含 Header 和 Footer，只放置
<slot />加上一個「(橘色特別版型)」的文字提示。
- 建立新頁面
app/pages/login.vue：- 內容顯示「這是登入頁，使用特殊版型」。
- 在
<script setup>中使用definePageMeta({ layout: 'orange' })來指定使用橘色版型。
3 驗收重點
請檢查 Claude 完成後的結果：
•
app/app.vue 檢查： 它應該變得很乾淨，大概只剩下這樣：
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>•
app/layouts/default.vue 檢查： 確認這裡有 Header、<slot />、Footer。
•
瀏覽器行為檢查：
- 回到首頁 (/)：應該跟上一堂課長得一樣（有頭有尾），這代表 default 版型運作正常。
- 進入登入頁 (/login)：沒有 Header 和 Footer，背景是橘色（或有文字提示），代表成功切換到 orange 版型。
💡 架構師筆記 (Slot 是什麼？)
<slot /> 是 Vue 的插槽概念。
•想像 Layout 是一個相框，<slot /> 就是相框中間挖空的那個洞。
•當你瀏覽 /about 時，Nuxt 就會把 about.vue 的內容「插」進 default.vue 的 <slot /> 位置裡。
視覺化示意：
default.vue:
<AppHeader />
<slot /> ← about.vue 的內容會插到這裡
<AppFooter />