Nuxt之默认模版和默认布局

最新推荐文章于 2024-06-12 09:25:13 发布

weixin_33834137

最新推荐文章于 2024-06-12 09:25:13 发布

阅读量567

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c04937ee51d4542ff5c21b2

版权

在开发应用时，经常会用到一些公用的元素，比如网页的标题是一样的，每个页面都是一模一样的标题，这个时候，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教程，感谢胖哥

关注