视图

app.vue

默认情况下，Nuxt 将此文件视为入口点，并为应用的每个路由渲染其内容。

¥By default, Nuxt will treat this file as the entrypoint and render its content for every route of the application.

<template>
  <div>
   <h1>Welcome to the homepage</h1>
  </div>
</template>

组件

¥Components

大多数组件都是可重用的用户界面部分，例如按钮和菜单。在 Nuxt 中，你可以在 components/ 目录中创建这些组件，它们将自动在你的应用中可用，而无需显式导入。

¥Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the components/ directory, and they will be automatically available across your application without having to explicitly import them.

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

<template>
  <span>
    <slot />
  </span>
</template>

页面

¥Pages

页面代表每个特定路由模式的视图。pages/ 目录中的每个文件都代表一个显示其内容的不同路由。

¥Pages represent views for each specific route pattern. Every file in the pages/ directory represents a different route displaying its content.

要使用页面，请创建 pages/index.vue 文件并将 <NuxtPage /> 组件添加到 app.vue（或删除 app.vue 作为默认条目）。现在，你可以通过在 pages/ 目录中添加新文件来创建更多页面及其对应的路由。

¥To use pages, create pages/index.vue file and add <NuxtPage /> component to the app.vue (or remove app.vue for default entry). You can now create more pages and their corresponding routes by adding new files in the pages/ directory.

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

<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

布局

¥Layouts

布局是页面的封装器，包含多个页面的通用用户界面，例如页眉和页脚显示。布局是使用 <slot /> 组件来显示页面内容的 Vue 文件。默认情况下将使用 layouts/default.vue 文件。自定义布局可以设置为页面元数据的一部分。

¥Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using <slot /> components to display the page content. The layouts/default.vue file will be used by default. Custom layouts can be set as part of your page metadata.

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <AppHeader />
    <slot />
    <AppFooter />
  </div>
</template>

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

<template>
  <section>
    <p>This page will be displayed at the /about route.</p>
  </section>
</template>

如果你想创建更多布局并了解如何在页面中使用它们，请参阅 布局部分 中的更多信息。

¥If you want to create more layouts and learn how to use them in your pages, find more information in the Layouts section.

高级：扩展 HTML 模板

¥Advanced: Extending the HTML Template

你可以通过添加注册钩子的 Nitro 插件来完全控制 HTML 模板。render:html 钩子的回调函数允许你在 HTML 发送到客户端之前对其进行修改。

¥You can have full control over the HTML template by adding a Nitro plugin that registers a hook. The callback function of the render:html hook allows you to mutate the HTML before it is sent to the client.

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) })
})