1. 安装

npm install swiper@4.5.1 vue-awesome-swiper@3.1.3 --save
或
yarn add swiper@4.5.1 vue-awesome-swiper@3.1.3

注意：
这里一定要对应swiper 和 vue-awesome-swiper版本，如果不对应，vue就会各种报错

2. 引入

2.1 全局引入

main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

2.2 局部引入

注意：
局部引入的时候：
vue-awesome-swiper@3.x 版本的 ---- 引入模块时使用小写：
import { swiper, swiperSlide } from “vue-awesome-swiper”;

vue-awesome-swiper@4.x 版本的 ---- 引入模块时使用大写：
import { Swiper, SwiperSlide } from “vue-awesome-swiper”;

<template>
    <div class="scrm">
        <!-- 使用swiper -->
         <swiper :options="swiperOption">
            <swiper-slide v-for="(item,index) in advantageData" :key="index">
             ...
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css'
export default {
    name: '',
    components: {
    	// 注册组件
    	Swiper,
    	SwiperSlide
    },
};
</script>
<style scoped lang="stylus">
</style>

3. 配置

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css'
export default {
    name: '',
    components: {
    	// 注册组件
    	swiper,
    	swiperSlide
    },
    data(){
    	return {
    		 swiperOption: {
                notNextTick: false,
                pagination: {
                    el: '.swiper-pagination'
                },
                loop: true,
                touchRatio: 2, // 触摸滑动的顺畅度
                initialSlide: 1, // 默认展示页
                autoplay: true, // 是否自动播放
                speed: 500, // 播放速度
                slidesPerView: 'auto',
                centeredSlides: true,
                paginationClickable: true,
                spaceBetween: 5, // 模块之间的间隔
                on: {
                    slideChangeTransitionEnd: function() {
                        // 处理手动操作轮播图后后不再自动轮播
                        this.autoplay.start();
                    }
                }
            }
		}
	}
};
</script>

更多的配置项请查看：https://www.swiper.com.cn/api/touch/55.html

4. 遇到的问题

1. This dependency was not found:swiper/dist/css/swiper.css
解决办法（版本对应即可）：

• swiper版本：4.5.2；
• vue-awesome-swiper：3.1.3；

5. 总结

目前发现的问题都是因为版本问题，所以一定要注意版本对应！！！！！

如发现其他问题，后续更新