Nuxt之默认模版和默认布局

2,177 阅读2分钟

在开发应用时,经常会用到一些公用的元素,比如网页的标题是一样的,每个页面都是一模一样的标题,这个时候,nuxt为我们提供了两种解决方法:默认模板,默认布局

一. 默认模板

nuex的默认模板只需要在根目录创建app.html就可以了,如果我们要在每个页面增加一段话:“Hello World”,我们可以这么做:

/app.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    {{HEAD}}
  </head>
  <body>
    <p>Hello World</p>
    {{APP}}
  </body>
</html>

HEAD读取的是:nuxt.config.js中的head里面的内容;

APP读取的是:页面主题内容

注意:HEAD和APP必须大写;

另外,修改默认模板需要重启服务才能生效

二. 默认布局

和默认模板类似的功能还有默认布局,但是从名字上你就可以看出来,默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息,只是关于<template>标签下的内容统一订制。

<template>
  <div>
    <p>Hello World</p>
    <nuxt/>
  </div>
</template>

这里的<nuxt/>就相当于我们每个页面的内容,你也可以把一些通用样式放入这个默认布局里,但是个人不建议这样写,会增加页面的复杂程度。

总结:要区分默认模版和默认布局的区别,模版可以订制很多头部信息,包括IE版本的判断;模版只能定制<template>里的内容,跟布局有关系。在工作中修改时要看情况来编写代码。


本文引用于技术胖nuxt教程,感谢胖哥