vue-ssr之nuxt.js的layout布局
在前端开发中，我们通常需要把公用部分抽离出来，单独作为一个layout文件，用来引入公共文件，这样我们就不需要在每一个页面都去引入公共文件了。那么我们在nuxt.js中如何实现一个公用模板抽离呢？
首先，nuxt.js为我们提供了默认的layout, 即项目文件下面的layouts/default.vue;所有的布局文件，都需要放在这里，并且该目录名为Nuxt.js保留的，不可更改。
默认布局
对layouts/default.vue进行改造后，整个项目都可以使用这个布局了。
<template>
<div>
<el-container>
<v-header></v-header>
<el-main>
<nuxt/>
</el-main>
</el-container>
</div>
</template>
<script>
import vHeader from '@/components/header'
export default {
components: {
vHeader
}
};
</script>
自定义布局
有的使用因为业务需求的不同，我们可能会遇到，一个默认的布局文件无法满足的情况，这个时候我们就可以使用自定义布局了，在layouts/下新建blog.vue文件，用来做博客的公用布局。
blog.vue文件
<template>
<div>
<h1>我是博客布局文件</h1>
<nuxt/>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
然后在项目使用的使用理由nuxt.js为我们提供的layout参数配置即可
<template>
<div>
这是博客布局的测试页面
</div>
</template>
<script>
export default {
layout: 'blog'
}
</script>
<style>
</style>
