意见

“视图”部分介绍了为在Nuxt.js应用程序中为特定路由配置数据和视图的所有内容。视图由应用模板,布局和实际页面组成。此外,您可以为每个页面的头部部分定义自定义元标记,这对SEO非常重要(搜索引擎优化)。

Nuxt.js中的观点的构成“src=

Nuxt.js中的观点的构成

页面

每个页面组件都是VUE组件,但umxt.js添加了特殊属性和功能,以便尽可能简单地开发应用程序。

页面/ index.vue.
<模板><H1.班级=红色的>你好,世界H1.>模板><脚本>出口默认{{//为此页面设置元标记}// ......}脚本><风格>。红色的{颜色红色的;}风格>

页面组件的属性

上面示例中的页面组件(如Head属性)有许多属性。

看看目录结构书籍要了解有关所有属性的更多信息,可以在您的页面上使用

布局

当您想要更改Nuxt.js应用程序的外观时,布局是一个很大的帮助。例如,您想要包含一个侧边栏或对移动和桌面具有不同的布局。

默认布局

您可以通过添加一个来定义默认布局default.vue.文件在布局目录中的文件。这将用于所有未指定布局的页面。您唯一需要在布局中包含的是呈现页面组件的组件。

布局/默认
<模板><nuxt./>模板>

了解更多信息Nuxt组件在组件章节中

自定义布局

您可以通过添加创建自定义布局.vue文件到布局目录。要使用您需要设置的自定义布局来设置布局页面组件中的属性您要使用该布局。该值将是您创建的自定义布局的名称。

创建博客布局添加一个万博全站客户端app万博全站客户端app博客文件到您的布局目录布局/博客万博全站客户端app

布局/博客万博全站客户端app
<模板><div><div>我的博万博全站客户端app客导航吧在这里div><nuxt./>div>模板>

确保添加创建布局以实际包含页面组件的组件。

然后,我们使用PlayOut属性在页面中使用“博客”的值,我们希望使用该布局。万博全站客户端app

页面/ posts.vue.
<模板><! - 你的模板 - >模板><脚本>出口默认{布局'万博全站客户端app博客'//页面组件定义}脚本>

如果您没有在页面中添加布局属性,例如:布局:'博客'万博全站客户端app,那么default.vue.将使用布局。

错误页面

错误页面是一个页面组件当发生错误时始终显示哪个(在服务器端呈现时不会发生)。

虽然这个文件放在了布局文件夹,它应该被视为一个页面。

如上所述,这种布局是特殊的,因为你不应该包括模板内的组件。您必须将此布局视为发生错误时显示的组件(404.500., 等等。)。与其他页面组件类似,您可以以通常的方式为错误页面设置自定义布局。

您可以通过添加一个来自定义错误页面布局/错误文件:

布局/错误
<模板><div><H1.V-IF.=ERROR.STATUSCODE === 404>找不到网页H1.><H1.v-else.>发生错误H1.><nuxtlink.=/>主页nuxtlink.>div>模板><脚本>出口默认{道具['错误']布局'错误'//你可以设置错误页面的自定义布局}脚本>

文档:app.html.

App模板用于为Nuxt.js应用程序创建文档的实际HTML框架,该应用程序注入内容以及头部和身体的变量。此文件是为您自动创建的,并且一般很少需要修改。您可以通过创建脚本或条件CSS类来自定义Nuxt.js使用的HTML应用程序模板app.html.默认情况下,项目源目录中的文件是根目录。

nuxt.js使用的默认模板是:

app.html.
<!doctype.HTML.><HTML.{{html_attrs.}}><{{head_attrs.}}>{{ 头 }}><身体{{body_attrs.}}>{{ 应用程序 }}身体>HTML.>

使用自定义应用程序模板的一个用例是为IE添加条件CSS类:

app.html.
<!doctype.HTML.><! -  [IF IE 9]>  <![ENDIF]  - ><! -  [如果(gt IE 9)|!(即)]> <! - ><HTML.{{html_attrs.}}><! -  <![endif]  - ><{{head_attrs.}}>{{ 头 }}><身体{{body_attrs.}}>{{ 应用程序 }}身体>HTML.>

虽然您可以在其中添加JavaScript和CSS文件app.html.,建议使用nuxt.config.js.来代替这些任务吧!