基礎入門
CoreArchitecture

目錄結構

Nuxt 4 採用了全新的目錄架構,將應用程式邏輯集中於 app/,實現了更清晰的關注點分離 (Separation of Concerns)。

結構探索

點擊下方的目錄樹,查看每個資料夾的詳細職責與使用規範。

Project Explorer
  • Project Root
    • nuxt.config.ts
    • app/
      • pages/
      • components/
      • layouts/
      • composables/
      • assets/
      • middleware/
    • server/
      • api/
      • routes/
      • middleware/
    • public/

app/

前端應用程式邏輯 (Vue App)。

#Frontend #Vue #Auto-import

詳細說明

這是開發者最常工作的地方。Nuxt 會自動掃描此目錄下的檔案,並處理路由、元件引入與狀態管理。

ID: app Select to view details

路徑別名 (Aliases)

為了避免使用冗長的相對路徑 (如 ../../components/Button.vue),Nuxt 提供了預設別名。

~
指向 app/ 目錄

用於引入 Vue 元件、Composables 或 Assets。

~/components/Header.vue
@
指向 專案根目錄

用於引入設定檔或根目錄下的資源。

@/nuxt.config.ts