视图
视图（Views）部分介绍了在 Nuxt 应用程序中为特定路由配置数据和视图所需的一切。视图由应用模板、布局和页面组成。
Nuxt 中的视图组成
页面
所有页面组件都是 Vue 组件，但 Nuxt 添加了特殊的属性和函数，使应用程序的开发尽可能简便。
<template>
<h1 class="red">Hello World</h1>
</template>
<script>
export default {
head() {
// 为此页面设置 meta 标签
}
// ...
}
</script>
<style>
.red {
color: red;
}
</style>
页面组件的属性
上面示例中的 head 属性只是页面组件众多属性之一。
布局
当您想要更改 Nuxt 应用的外观时，布局非常有用，例如包含侧边栏或为移动端和桌面端使用不同的布局。
默认布局
通过在 layouts 目录中添加 default.vue 文件可以定义默认布局，该布局用于所有没有指定布局的页面。布局中唯一需要包含的是渲染页面组件的 <Nuxt /> 组件。
<template>
<Nuxt />
</template>
自定义布局
通过在 layouts 目录中添加 .vue 文件可以创建自定义布局。要使用自定义布局，需要在想要使用该布局的页面组件中设置 layout 属性，值为创建的自定义布局名称。
要创建 blog 布局，在 layouts 目录 layouts/blog.vue 中添加 blog.vue 文件：
<template>
<div>
<div>My blog navigation bar here</div>
<Nuxt />
</div>
</template>
<Nuxt /> 组件。然后在想要使用该布局的页面中使用值为 'blog' 的 layout 属性：
<template>
<!-- 模板 -->
</template>
<script>
export default {
layout: 'blog'
// 页面组件定义
}
</script>
layout: 'blog' 这样的 layout 属性，将使用 default.vue 布局。错误页面
错误页面是一个页面组件，当发生错误时始终显示（服务端渲染时不会发生）。
layouts 文件夹中，但应将其视为页面。如上所述，此布局很特殊，因为不应在模板中包含 <Nuxt /> 组件。必须将此布局视为发生错误（404、500 等）时显示的组件。与其他页面组件一样，可以用常规方式为错误页面设置自定义布局。
通过添加 layouts/error.vue 文件可以自定义错误页面：
<template>
<div>
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'error' // 可以为错误页面指定自定义布局
}
</script>
文档：App.html
应用模板用于创建 Nuxt 应用程序文档的实际 HTML 框架，不仅注入内容，还向头部和主体注入变量。此文件会自动创建，通常很少需要修改。通过在项目的源目录（默认为根目录）中创建 app.html 文件，可以自定义 Nuxt 使用的 HTML 应用模板，以包含脚本或条件 CSS 类。
Nuxt 使用的默认模板如下：
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
使用自定义应用模板的一个用例是为 IE 添加条件 CSS 类：
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
app.html 中添加 JavaScript 或 CSS 文件，但建议使用 nuxt.config.js！