视图
Nuxt 提供了几个组件层来实现你的应用的用户界面。
app.vue
默认情况下,Nuxt 将把这个文件视为入口点,并为应用的每个路由渲染其内容。
app.vue
<template>
<div>
<h1>欢迎来到首页</h1>
</div>
</template>
如果你熟悉 Vue,你可能想知道
main.js
在哪里(该文件通常用于创建一个 Vue 应用)。Nuxt 在后台进行了这个操作。组件
大多数组件都是可重用的用户界面片段,比如按钮和菜单。在 Nuxt 中,你可以在 components/
目录中创建这些组件,它们将自动在整个应用中可用,无需显式导入。
<template>
<div>
<h1>欢迎来到首页</h1>
<AppAlert>
这是一个自动导入的组件。
</AppAlert>
</div>
</template>
页面
页面表示每个特定路由模式的视图。pages/
目录中的每个文件都代表一个不同的路由,显示其内容。
要使用页面,创建 pages/index.vue
文件并将 <NuxtPage />
组件添加到 app.vue
(或删除默认入口的 app.vue
)。现在,你可以通过在 pages/
目录中添加新文件来创建更多页面和相应的路由。
<template>
<div>
<h1>欢迎来到首页</h1>
<AppAlert>
这是一个自动导入的组件
</AppAlert>
</div>
</template>
布局
布局是页面的包装器,包含一些页面共有的用户界面,比如页头和页脚。布局使用 Vue 文件和 <slot />
组件来显示页面内容。默认情况下,将使用 layouts/default.vue
文件。可以在页面的元数据中设置自定义布局。
如果你的应用中只有一个布局,我们建议使用
app.vue
和 <NuxtPage />
。<template>
<div>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</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="自定义描述" />`)
})
// 你也可以在这里拦截响应。
nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})