Nuxt在pages页面中如何引入layouts的布局

在写前端时，我们经常会遇到比较复杂的页面，如果全部都写在一个vue中，那么代码量就会特别大，而且不利于后期的修改和维护，那么这就要我们学会拆分页面，模块化界面。

• 首先，我们可以看到如图所示的界面，我们可以将它拆分为三块（此页面的路径为pages/amuse/index.vue）

1. 顶部导航栏
2. 娱乐模块
3. 留白部分

• 那么，我们如何操作呢？
  在layouts中新建一个test.vue,我们用这个vue的布局来填充留白的部分

  
  image.png

test.vue

<style scoped>
.test{
    font-size: 20px;
    width: 100%;
    height: 700px;
    background: #FFDAB9;
    color:  #D3D3D3;
    background: url("../assets/img/010.jpg");
}
</style>
<template>
 <div>
    <div class="test">我还是很喜欢你，像旧城里的老折子戏，温言软语</div>
 </div>
</template>

• 接着，我们在pages/amuse/index.vue中引入，如下图所示
  pages/amuse/index.vue

  
  image.png
  image.png

• 引入之后，即可看见原本空白的部分已经被test.vue的布局填充

  
  image.png

三部分的内容思想相同，本篇就只以其中一块举例，希望能对大家有所帮助