Nuxt的默认模板和默认布局

最新推荐文章于 2024-09-30 10:14:10 发布

UIEngineer

最新推荐文章于 2024-09-30 10:14:10 发布

阅读量7.5k

点赞数 1

分类专栏： vue框架

本文链接：https://blog.csdn.net/zjsfdx/article/details/82145730

版权

41 篇文章 2 订阅

订阅专栏

在开发应用时，经常会用到一些公用的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模板。这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入；模板比较方便，但是只能每个页面都引入。

默认模板
Nuxt为我们提供了超简单的默认模板定制方法，只要在根目录下创建一个app.html就可以实现了。现在我们希望每个页面的最上边都加入”Hello Nuxt”这几个字，我们就可以使用默认模板来完成。

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

这里的{{HEAD}}读取的是nuxt.config.js里的信息，{{APP}}就是我们写的pages文件夹下的主体页面了。需要注意的是HEAD和APP都需要大写。

这里写图片描述

这里还有一个小坑需要注意，就是如果你建立了默认模板后，记得要重启服务器。
但是默认布局不用重启服务器。

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

还是上边的需求，我们在每个页面的最顶部放入“I hava a dream.”这几个字，看一下在默认布局里的实现。

<template>
  <div>
    <p>I hava a dream.</p>
    <nuxt/>
  </div>
</template>

这里写图片描述

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

总结：要区分默认模板和默认布局的区别，模板可以订制头部信息，包括IE版本的判断；布局只能订制<template>里的内容。

关注

专栏目录