视图
Nuxt 提供了多个组件层来实现应用程序的用户界面。
app.vue
默认情况下，Nuxt 会将此文件视为 **入口点**，并为应用程序的每个路由渲染其内容。
app.vue
<template>
<div>
<h1>Welcome to the homepage</h1>
</div>
</template>
如果您熟悉 Vue，您可能想知道
main.js 在哪里（通常创建 Vue 应用程序的文件）。Nuxt 在后台执行此操作。组件
大多数组件都是用户界面的可重用部分，例如按钮和菜单。在 Nuxt 中，您可以在 components/ 目录中创建这些组件，并且它们将自动在您的应用程序中可用，而无需显式导入它们。
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component.
</AppAlert>
</div>
</template>
页面
页面代表每个特定路由模式的视图。 pages/ 目录中的每个文件都代表一个不同的路由，显示其内容。
要使用页面，请创建 pages/index.vue 文件并将 <NuxtPage /> 组件添加到 app.vue（或删除 app.vue 以获取默认入口）。您现在可以通过在 pages/ 目录中添加新文件来创建更多页面及其对应的路由。
<template>
<div>
<h1>Welcome to the homepage</h1>
<AppAlert>
This is an auto-imported component
</AppAlert>
</div>
</template>
布局
布局是页面周围的包装器，包含多个页面的通用用户界面，例如页眉和页脚显示。布局是使用 <slot /> 组件显示 **页面** 内容的 Vue 文件。layouts/default.vue 文件将默认使用。自定义布局可以设置为页面元数据的一部分。
如果您在应用程序中只有一个布局，我们建议使用
app.vue 和 <NuxtPage /> 代替。<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) })
})