一、components的基本使用

在components中创建Banner.vue文件

<template>

  <div class="banner">

    我是轮播图组件

  </div>

</template>

在首页直接使用

<template>

  <div>

    hello

    <Banner></Banner>

  </div>

</template>

效果如图

二、组件的子组件的使用

在components中创建文件夹Banner,在Banner里面创建Child.vue

<template>

  <div>

    我是子组件

  </div>

</template>

在首页使用

<template>

  <div>

    hello

    <Banner></Banner>

    <BannerChild></BannerChild>

  </div>

</template>

效果如图

三、嵌套路由的使用

在pages中创建about文件夹，在about文件夹中创建child.vue

<template>

  <div>

    我是about的子页面

  </div>

</template>

在about中引入

  <div>

    about

    <NuxtPage></NuxtPage>

  </div>

</template>

效果如图