首先安装vue-awesome-swiper

npm install vue-awesome-swiper --save

引用

/*全局引入*/
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';

Vue.use(VueAwesomeSwiper);

/*组件间引入*/
import {swiper,swiperSlide} from 'vue-awesome-swiper';
export default {
    data() {
        swiperOption: {
            slidesPerView: 4,// 每页展示几个
            slidesPerGroup: 4,// 每屏滚动几个
            pagination: {
                el: '.swiper-pagination',
                type: ''
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            },
            observer: true,    // 动态检查器,自动初始化swiper,默认为false
            observerParents: true,    //将observe应用于Swiper的父元素.当Swiper的父元素变化时,Swiper更新.如window.resize.
        }
    },
    components: {
        swiper,
        swiperSlide
    }
}

组件的用法：

 <swiper :options="swiperOption">
       <swiper-slide v-for="(item,index) in lists" :key="index">
            <div class="col-lg-12">
                <div class="image-group">
                    {{item}}
                </div>
             </div>
         </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>

相关资料：

https://www.npmjs.com/package/vue-awesome-swiper

https://surmon-china.github.io/vue-awesome-swiper/