Nuxt之默认模版和默认布局

时间 2019-12-07

标签 nuxt 默认模版布局繁體版

原文原文链接

在开发应用时，常常会用到一些公用的元素，好比网页的标题是同样的，每一个页面都是如出一辙的标题，这个时候，nuxt为咱们提供了两种解决方法：默认模板，默认布局
html

一. 默认模板

nuex的默认模板只须要在根目录建立app.html就能够了，若是咱们要在每一个页面增长一段话：“Hello World”，咱们能够这么作：vue

/app.html:bash

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

HEAD读取的是：nuxt.config.js中的head里面的内容；app

APP读取的是：页面主题内容jsp

注意：HEAD和APP必须大写；布局

另外，修改默认模板须要重启服务才能生效post

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

<template>
  <div>
    <p>Hello World</p>
    <nuxt/>
  </div>
</template>复制代码

这里的<nuxt/>就至关于咱们每一个页面的内容，你也能够把一些通用样式放入这个默认布局里，可是我的不建议这样写，会增长页面的复杂程度。nuxt

总结：要区分默认模版和默认布局的区别，模版能够订制不少头部信息，包括IE版本的判断；模版只能定制<template>里的内容，跟布局有关系。在工做中修改时要看状况来编写代码。code

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