檢視

Nuxt 提供了多個元件層來實現應用程式的使用者介面。

app.vue

預設情況下，Nuxt 會將此檔案視為入口點，併為應用程式的每個路由渲染其內容。

app/app.vue
<template>
  <div>
    <h1>Welcome to the homepage</h1>
  </div>
</template>
如果您熟悉 Vue，您可能會想知道 main.js 在哪裡（通常建立 Vue 應用程式的檔案）。Nuxt 在幕後完成了此操作。

元件

大多陣列件是使用者介面的可重用部分，如按鈕和選單。在 Nuxt 中，您可以在 app/components/ 目錄中建立這些元件，它們將自動在您的應用程式中可用，而無需明確匯入。

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component.
    </AppAlert>
  </div>
</template>

頁面

頁面表示每個特定路由模式的檢視。 app/pages/ 目錄中的每個檔案都代表一個顯示其內容的不同路由。

要使用頁面，請建立一個 app/pages/index.vue 檔案並將 <NuxtPage /> 元件新增到 app/app.vue 中（或刪除 app/app.vue 以使用預設入口）。您現在可以透過在 app/pages/ 目錄中新增新檔案來建立更多頁面及其對應的路由。

<template>
  <div>
    <h1>Welcome to the homepage</h1>
    <AppAlert>
      This is an auto-imported component
    </AppAlert>
  </div>
</template>
在 路由部分 閱讀更多內容。

佈局

佈局是圍繞頁面的包裝器，包含多個頁面的通用使用者介面，如頁首和頁尾顯示。佈局是使用 <slot /> 元件顯示頁面內容的 Vue 檔案。預設情況下將使用 app/layouts/default.vue 檔案。自定義佈局可以作為頁面元資料的一部分進行設定。

如果您的應用程式中只有一個佈局，我們建議改用帶有 <NuxtPage /> 的 app/app.vue。
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

如果您想建立更多佈局並學習如何在頁面中使用它們，請在佈局部分中查詢更多資訊。

高階：擴充套件 HTML 模板

如果您只需要修改 <head>，您可以參考 SEO 和元資料部分。

您可以透過新增一個註冊鉤子的 Nitro 外掛來完全控制 HTML 模板。render:html 鉤子的回撥函式允許您在 HTML 傳送給客戶端之前對其進行修改。

server/plugins/extend-html.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    // This will be an object representation of the html template.
    console.log(html)
    html.head.push(`<meta name="description" content="My custom description" />`)
  })
  // You can also intercept the response here.
  nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})
在 文件 > 4 X > 指南 > 深入 > 鉤子 中閱讀更多內容。