上一章我们已经学习了安装和基础组件的安装，那么本章我们来学习如何使用

前言：页面架构，一般而言，页面架构分为头，主体，底部，头和底部是公用的，每个页面都写一遍不就傻逼了！

所以本章主要讲解的是如何优雅的构建一个网站框架！

1、明白nuxt的架构

layouts 根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。

那么原理是什么呢！

比如index.vue 需要使用layouts布局，就可以这样！

export default {
  layout: 'blog',
}

这样index.vue 就会按照layouts/blog.vue布局了，啥意思呢！

新建 layouts/blog.vue文件

<template>
  <div>
    <div>我的导航栏在这里</div>
    <nuxt />
  </div>
  </template>

 index.vue里面的内容都会被包裹在<nuxt>文件中了， 

或者简单点，可通过添加 layouts/default.vue 文件来扩展应用的默认布局。

那么index.vue 不需要写  layout: 'blog',即可默认布局了

 layouts/default.vue

<template>
  <div>
    <div>我的导航栏在这里</div>
    <Nuxt />
    <div>
      尾巴
    </div>
  </div>
</template>

<script>
</script>

注意的是，如果是后面新建的，需要重启应用才能生效！

效果图

git地址 

https://gitee.com/hexiangss/nuxtjs-initialization/tree/master