#

新建了一个子组件叫做Banner.vue，这个子组件自然就是指轮播图组件swiper（感兴趣的可以去官网看看）。

第一步：安装swiper。

npm install --save swiper

第二步：写template。

轮播图是一个列表，所以这里使用到了v-for来遍历，轮播的部分是swiper-slide元素。我把图片路径绑定到了style属性上面。

    </div>
  <div class="swiper-pagination swiper-pagination-white"></div>
</div>
<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in listImg">
            <img :src="item.url"/>
            <!--<img src="../../assets/01.jpg"/>-->
            </div>
        </div>
      <div class="swiper-pagination swiper-pagination-white"></div>
    </div>

#

根据swiper的官方教程，我们需要实例化swiper。
1、导入swiper；
2、导入swiper的css；
3、通过获取图片数据listImg；
4、mounted类似react中的componentDidMount方法，实例化swiper必须等到dom渲染完成才能操作。

<script>
import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    export default {
        data(){
        return {
        //图片路径
            listImg:[
        {url:'../../../static/01.jpg'},
        {url:'../../../static/02.jpg'},
        {url:'../../../static/03.jpg'}
        ]
        }
        },
        mounted() {
            console.log('mounted', this)
var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    pagination: {
      el: '.swiper-pagination',
    },    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
    disableOnInteraction: false,
  },
})  
        }
    }
</script>

第四步：写css样式

<style>
 .swiper-container {width: 100%; height: 10rem;}
      .swiper-wrapper {width: 100%; height: 100%; }
      .swiper-slide { width: 100%;   height: 100%;}
      .swiper-pagination-bullet { width:0.833rem;
        height: 0.833rem;display: inline-block; background: #7c5e53; }  
    .swiper-slide img{width: 100%;height: 100%; }
</style>

完整代码：

<template>
    <div>
        <!--轮播图---写法-->
         <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in listImg">
                    <img :src="item.url"/>
                    <!--<img src="../../assets/01.jpg"/>-->
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-white"></div>
        </div>
    </div>
</template>
<script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    export default {
        data(){
            return {
                //图片路径
                listImg:[
                    {url:'../../../static/01.jpg'},
                    {url:'../../../static/02.jpg'},
                    {url:'../../../static/03.jpg'}    
                ]
            }
        },
        mounted() {
            console.log('mounted', this)
            var mySwiper = new Swiper ('.swiper-container', {
                loop: true, 
                pagination: {
                  el: '.swiper-pagination',
                },    
                // 如果需要前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
                autoplay: {
                disableOnInteraction: false,
              },
            })  
        }
    }    
</script>
<style>    
     .swiper-container {width: 100%; height: 10rem;}
      .swiper-wrapper {width: 100%; height: 100%; }
      .swiper-slide { width: 100%;   height: 100%;}
      .swiper-pagination-bullet { width:0.833rem;
        height: 0.833rem;display: inline-block; background: #7c5e53; }  
    .swiper-slide img{width: 100%;height: 100%; }
</style>