透過 100 多個技巧的集合來學習 Nuxt!

app.vue

app.vue 檔案是您的 Nuxt 應用程式的主要元件。

最小使用方式

在 Nuxt 3 中,pages/ 目錄是選用的。如果不存在,Nuxt 將不會包含 vue-router 相依性。這在處理著陸頁或不需要路由的應用程式時很有用。

app.vue
<template>
  <h1>Hello World!</h1>
</template>
文件 > 範例 > Hello World中讀取並編輯一個即時範例。

與頁面一起使用

如果您有一個 pages/ 目錄,要顯示目前的頁面,請使用 <NuxtPage> 元件

app.vue
<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>
由於 <NuxtPage> 內部使用了 Vue 的 <Suspense> 元件,因此不能將其設定為根元素。
請記住,app.vue 作為您 Nuxt 應用程式的主要元件。您新增到其中的任何內容(JS 和 CSS)都將是全域的,並包含在每個頁面中。
如果您希望能夠自訂頁面之間的頁面結構,請查看 layouts/ 目錄。