安装插件swiper

npm install vue-awesome-swiper --save

创建一个banner.vue的文件

在banner.vue里引用swiper

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.min.css';

html 

<template>
    <div class="swiper-container swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in 1" v-if="banner==''">  //当banner为空时，默认一张图片
          <img src="../assets/images/banner1.png" width="100%"  style="display:block;">
        </div>
        <div class="swiper-slide" v-for="item in banner" v-if="banner!=''">  //当banner不为空时，循环banner里的数据
          <a :href="item.url">
            <div class="swiper-img flex3">
              <img :src="item.image" width="100%"   alt="banner" style="display:block;">
            </div>
          </a>
        </div>
      </div>
      <div class="swiper-pagination"></div>  //图片的圆点  
    </div>
</template>

js

<script>
    import VueAwesomeSwiper from 'vue-awesome-swiper';   //引用swiper
    import 'swiper/dist/css/swiper.min.css';        //引用css
  export default{
    props:['banner'],    //首页传过来的数据
    mounted(){
      var mySwiper = new Swiper('.swiper1',{   
                pagination: '.swiper-pagination',
                autoplay: 3000,
                paginationClickable: true,
                centeredSlides: true,
                autoplayDisableOnInteraction: false,
                preventClicks: false,
                speed: 600,
                observer:true,
                loop: true,
                observeParents:true
       })
     
    }
  }
</script>

在首页使用

html

<app-banner :banner="banner" ></app-banner>   //使用banner.vue的内容，把data里的banner的数据传递过去

js

data(){
    return{
        banner:[{url:'http://123.com',image:'1.png'},{url:'http://123.com',image:'2.png'}]  //虚拟数据
    }
}

import Banner from '@/components/Banner'   //这里指的是上面写的banner.vue   在这里可以不写后缀

components: {
      'app-banner': Banner,  //使用上面的Banner.vue    这样可以在html 里直接使用<app-banner></app-banner> 就可以使用banner.vue里的内容了
  },