使用vue配置轮播图

步骤：

1.新建components / swiperCom.vue

2.联系swiperCom.vue 与 HomeView.vue

3在HomeView.vue 中引入配置swiperCom.vue

<!--       在music002中安装轮播图安装包-->
<!--       npm i swiper vue-awesome-swiper --save   -->
<!--       npm i swiper@5 --save -->
<template>
   <div id="swipercom">
       <div class="swiper-container" id="swiperIndex">
           <div class="swiper-wrapper">
               <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
                   <img :src="item.pic" alt="">
               </div>
           </div>
           <!--分页器-->
           <div class="swiper-pagination"></div>
       </div>
   </div>
</template>

<script>
   // 引入轮播图
   import 'swiper/css/swiper.css'
   import Swiper from 'swiper

   export default {
       name: "swiperCom",
       data() {
           return {
               imgs: [{}, {}, {}]
          }
      }