nuxt.js1-6
Posted 小凡的耿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了nuxt.js1-6相关的知识，希望对你有一定的参考价值。
Nuxt的默认模版和默认布局
在开发应用时，经常会用到一些公用的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模版。这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入；模版比较方便，但是只能每个页面都引入。这节课我们就学习一下如何使用Nuxt的默认模版和默认布局功能。
默认模板
Nuxt为我们提供了超简单的默认模版订制方法，只要在根目录下创建一个app.html就可以实现了。现在我们希望每个页面的最上边都加入“JSPang.com 技术胖的博客” 这几个字，我们就可以使用默认模版来完成。
<!DOCTYPE html> <html lang="en"> <head> {{ HEAD }} </head> <body> <p>jspang.com 技术胖的博客</p> {{ APP }} </body> </html>
这里的{{ HEAD }}读取的是nuxt.config.js里的信息，{{APP}} 就是我们写的pages文件夹下的主体页面了。需要注意的是HEAD和APP都需要大写，如果小写会报错的。
这里还有一个小坑需要大家注意，就是如果你建立了默认模板后，记得要重启服务器，否则你的显示不会成功；但是默认布局是不用重启服务器的。
默认布局
和默认模板类似的功能还有默认布局，但是从名字上你就可以看出来，默认布局主要针对于页面的统一布局使用。它在位置根目录下的layouts/default.vue。需要注意的是在默认布局里不要加入头部信息，只是关于<template>标签下的内容统一订制。
还是上边的需求，我们在每个页面的最顶部放入“JSPang.com 技术胖的博客” 这几个字，看一下在默认布局里的实现。
<template>
<div>
<p>JSPang.com 技术胖的博客</p>
<nuxt/>
</div>
</template>
这里的<nuxt/>就相当于我们每个页面的内容，你也可以把一些通用样式放入这个默认布局里，但是个人不建议这样写，会增加页面的复杂程度。
以上是关于nuxt.js1-6的主要内容，如果未能解决你的问题，请参考以下文章