vue中关于vue-awesome-swiper的用法，少走弯路

今天做项目中使用到了轮播图，然后引入的时候出了些问题，现在整理一下，预防以后再出问题。
目前（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,
       },
     }
   },

这样就完成了！其他的业务逻辑根据实际情况在这个初始框架之上去填写就行了，安装和引入文件时注意好了就行，防止后续出现问题！