本章將帶你認識 Nuxt 的自動引入機制，讓元件開發更簡潔優雅。
1 核心概念 Concept
在標準的 Vue 開發中，每當你要用一個元件，你必須做兩件事：
import MyHeader from './components/MyHeader.vue'
// 在 components: {} 註冊它Nuxt 會掃描檔名，並將其轉換為標籤名稱：
檔案：
app/components/AppHeader.vue標籤：
<AppHeader />就是這麼簡單。完全不需要寫 import 語句。
2 給 Claude Code 的中文指令 Prompt
我們要建立一個網站常見的「頁首 (Header)」和「頁尾 (Footer)」，並讓它們出現在每一頁。
請複製以下指令給 Claude：
請幫我建立全域元件並使用自動引入功能：
- 建立
app/components/資料夾。 - 建立
app/components/AppHeader.vue：- 內容是一個簡單的導覽列 (
<nav>)。 - 包含兩個連結：連往首頁 (/) 和關於頁 (/about)。
- 內容是一個簡單的導覽列 (
- 建立
app/components/AppFooter.vue：- 內容是一個簡單的
<footer>，顯示「© 2025 Nuxt Learning」。
- 內容是一個簡單的
- 修改
app/app.vue：- 在
<NuxtPage />的上方放入<AppHeader />。 - 在
<NuxtPage />的下方放入<AppFooter />。
- 在
重要：請不要在 <script> 中寫任何 import 語句，直接在 template 使用元件標籤即可。
3 驗收重點 Acceptance
請檢查 Claude 完成後的結果：
•
程式碼檢查 (最重要)： 打開 app/app.vue，檢查 <script> 區塊。
•
瀏覽器行為檢查：
- 畫面最上方出現了導覽列。
- 畫面最下方出現了版權宣告。
- 切換頁面（首頁 → 關於頁），Header 和 Footer 應該一直都在，只有中間的內容在變。
💡 架構師筆記 (巢狀元件命名法)
如果你的專案變大，元件會很多，這時候資料夾結構會影響元件名稱：
檔案路徑：
app/components/base/Button.vue自動產生的標籤：
<BaseButton /> Nuxt 會自動把資料夾名稱 (base) 和檔名 (Button) 拼起來變成 PascalCase。這能避免不同資料夾裡有同名檔案（例如 user/Card.vue 和 product/Card.vue 分別變成 <UserCard /> 和 <ProductCard />）。