04
Re:Nuxt 100 天練習曲
Day 4
蓋你的第一個網頁房子
Day 4·專案結構·組件架構
昨天我們認識了設定檔，今天我們來動手「蓋房子」吧！
Nuxt 把網頁介面拆解成幾個部分，就像蓋房子一樣，有外殼、有隔間、有裝潢風格，還有各式各樣的傢俱。我們來一一認識它們。
1. 房子的外殼：app.vue
這是整個應用程式最外層的「殼」。放在這裡的東西，在每一個頁面都會顯示。它是一切的進入點。
2. 房子的隔間：pages/ 資料夾
這裡放的是網站的各個「房間」，也就是獨立的頁面。
pages/index.vue→ 你的「客廳」（首頁）pages/about.vue→ 「關於我們」的房間pages/products.vue→ 「商品介紹」的房間但是，光有房間還不夠，你需要在 app.vue（外殼）裡開一個「門」，才能看到房間裡的樣子。
這個「門」就是 <NuxtPage />。
app.vue
<template>
<div>
<NuxtPage />
</div>
</template> 3. 房子的裝潢風格：layouts/ 資料夾
這就像是你家的統一裝潢風格，例如，讓每個房間都有同樣的「天花板」(Header) 和「地板」(Footer)。
Layout 檔案裡會有一個 <slot /> 標籤，這個位置就是要用來放置「房間 (Page)」內容的地方。
layouts/default.vue
<template>
<div>
<TheHeader />
<slot />
<TheFooter />
</div>
</template> 4. 隨取即用的傢俱：components/ 資料夾
這些就像是標準化的傢俱（例如：按鈕、卡片、提示框）。
最神奇的是，你只要把元件檔放在 components/ 資料夾，Nuxt 就會自動幫你準備好。你可以在任何「房間」(Page) 或「裝潢」(Layout) 裡直接使用它，完全不需要手動 import！
今日總結
今天我們學會了用 app.vue 當外殼，用 pages/ 隔出房間，用 layouts/ 統一風格，再用 components/ 擺放傢俱。
有了這張藍圖，你就能開始組合出任何你想要的網頁結構了！
app.vue
整個應用的外殼
pages/
各個獨立頁面
layouts/
統一的版面配置
components/
可重複使用的元件