vuecli使用组件写一个5张图并且点击下方标题可展示相应的图片的轮播图

首先需要安装 `vue-awesome-swiper` 插件，可以使用以下命令进行安装：

npm install vue-awesome-swiper --save

接下来，我们可以新建一个 Carousel 组件，代码如下：

<template>
  <div class="carousel">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in imgList" :key="index">
        <img :src="item" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <div class="title">
      <span v-for="(item, index) in imgList" :key="index" @click="changeIndex(index)" :class="{active: currentIndex === index}">{{item.title}}</span>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      imgList: [
        {
          title: '图片1',
          url: 'http://xxx.xxx.xxx/1.jpg'
        },
        {
          title: '图片2',
          url: 'http://xxx.xxx.xxx/2.jpg'
        },
        {
          title: '图片3',
          url: 'http://xxx.xxx.xxx/3.jpg'
        },
        {
          title: '图片4',
          url: 'http://xxx.xxx.xxx/4.jpg'
        },
        {
          title: '图片5',
          url: 'http://xxx.xxx.xxx/5.jpg'
        }
      ],
      currentIndex: 0
    }
  },
  methods: {
    changeIndex(index) {
      this.currentIndex = index;
      this.$refs.mySwiper.swiper.slideTo(index, 300, false);
    }
  }
}
</script>

<style scoped>
.carousel {
  position: relative;
  .swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
  }
  .swiper-button-prev,
  .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    color: #fff;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    transition: all .3s;
    &:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
  }
  .swiper-button-prev {
    left: 10px;
  }
  .swiper-button-next {
    right: 10px;
  }
  .title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    span {
      margin: 0 10px;
      color: #fff;
      cursor: pointer;
      &.active {
        font-weight: bold;
      }
    }
  }
}
</style>

在该组件中，我们首先引入了 `vue-awesome-swiper` 的 `Swiper` 和 `SwiperSlide` 组件，然后在 `data` 中定义了图片列表 `imgList` 和当前选中的图片索引 `currentIndex`。接着，在模板中使用 `swiper` 标签包裹 `swiper-slide` 标签，渲染出轮播图。在 `swiper` 标签中，设置了轮播图的选项，包括是否循环、是否显示分页器、是否显示前后翻页按钮等。在 `swiper-slide` 标签中，使用 `v-for` 遍历图片列表，渲染出每张图片。在模板底部，通过 `v-for` 遍历图片列表，渲染出标题列表，并且在点击标题时，使用 `changeIndex` 方法切换当前选中的图片，并且使用 `this.$refs.mySwiper.swiper.slideTo(index, 300, false)` 方法切换轮播图。

最后，在样式中，设置了轮播图、分页器、前后翻页按钮和标题的样式。

这样就可以实现一个简单的轮播图组件了。