视图
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>
<template>
<span>
<slot />
</span>
</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>
<template>
<section>
<p>This page will be displayed at the /about route.</p>
</section>
</template>
布局
布局是页面周围的包装器,包含多个页面的公共用户界面,例如页眉和页脚显示。布局是使用 <slot /> 组件显示 页面 内容的 Vue 文件。默认情况下将使用 app/layouts/default.vue 文件。自定义布局可以作为页面元数据的一部分进行设置。
如果你的应用程序只有一个布局,我们推荐使用带有
<NuxtPage /> 的 app/app.vue 代替。<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>
如果你想创建更多布局并了解如何在页面中使用它们,请参阅 布局部分 中的更多信息。
高级: 扩展 HTML 模板
如果你只需要修改
<head>，请参阅 SEO 和 meta 文档。你可以通过添加注册钩子的 Nitro 插件来完全控制 HTML 模板。
render:html 钩子的回调函数允许你在发送到客户端之前更改 HTML。
server/plugins/extend-html.ts
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('render:html', (html, { event }) => {
// 这将是 html 模板的对象表示形式。
console.log(html)
html.head.push(`<meta name="description" content="My custom description" />`)
})
// 你还可以在此处拦截响应。
nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})