明天做我的项目中应用到了轮播图，而后引入的时候出了些问题，当初整顿一下，预防当前再出问题。
目前（2022年1月22日）依据查阅多方材料收集到的材料，我这里列一下：

  1. 最好用的版本是v3.1.3。
    利用npm下载是这个指令：npm install vue-awesome-swiper@3.1.3 --save，对，这个版本不须要写成npm install swiper vue-awesome-swiper@3.1.3 --save,比照一下啊，下边这个多了个swiper

  2. 倡议部分引入（这里也只赘述部分引入的办法），毕竟vue-awesome-swiper也不算特地小，除非你有多个组件都须要轮播图

    import 'swiper/dist/css/swiper.css'// 留神下边引入的swiper和swiperSlide第一个字母s都是小写的，大写会报错import { swiper, swiperSlide } from 'vue-awesome-swiper'
    // 在部分组建中将其作为组件注入components: { swiper, swiperSlide,},
    computed: { // 这个就是swiper的实例，有很多办法都能够通过这个函数的返回值获取到 swiper() {return this.$refs.mySwiper.swiper  },},
    <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="(item, i) in items" :key="i"><img :src="item.image"/> </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> <div class="swiper-scrollbar"   slot="scrollbar"></div> --></swiper>

    模板代码写好后会发现上边绑定了一个自定义属性options，其值为swiperOption，这个swiperOption是能够自定义的，写成啥都行，但要与下边data中对应。

    data() { return {swiperOption: {  loop: true,}, }},

这样就实现了！其余的业务逻辑依据理论状况在这个初始框架之下来填写就行了，装置和引入文件时留神好了就行，避免后续呈现问题！