码迷,mamicode.com
首页 > Web开发 > 详细

nuxt.js1-6

时间:2018-05-22 22:09:38      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:head   报错   code   简单的   span   手动   头部   div   文件夹   

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

标签:head   报错   code   简单的   span   手动   头部   div   文件夹   

原文地址:https://www.cnblogs.com/xiaofandegeng/p/9073964.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!