以下是我的项目中应用swiper插件的根本应用以及常见问题
步骤：

  1. 装置 ：cnpm i -S vue-awesome-swiper@3.1.3（swiper插件）swiper@5.2.0
  2. 全局引入：
import VueAwesomeSwiper from 'vue-awesome-swiper';import 'swiper/css/swiper.css'//有时候会报错，找node_modules文件夹    Vue.use( VueAwesomeSwiper )

3.在组件中配置：

<swiper :options="swiperOption">                <swiper-slide class="swiper-slide" v-for="(item,index) in carouselArr" :key="index">                <img :src="item"/>                </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>
<script>               export default {                data(){                         return {                               swiperOption:{                            //显示分页                            pagination: {                                      el: '.swiper-pagination'                            },                            //设置点击箭头                            navigation: {                                      nextEl: '.swiper-button-next',                                       prevEl: '.swiper-button-prev'                            },                            //主动轮播                            autoplay: {                                      delay: 2000,                              //当用户滑动图片后持续主动轮播                                      disableOnInteraction: false,                            },                            //开启循环模式                            loop: true                              },                 carouselArr : [1,2,3]                         }                }              }</script>

【留神】：

  1. this.$ref.mySwiper.swiper.slideTo(index,1000,false)能够配置点击哪个slider切换对应的图片
  2. 在js中引入资源须要应用 require("../xxx")