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

今天做项目中使用到了轮播图，然后引入的时候出了些问题，现在整理一下，预防以后再出问题。
目前（2022年1月22日）根据查阅多方资料收集到的资料，我这里列一下：

最好用的版本是v3.1.3。
利用npm下载是这个指令：npm install vue-awesome-swiper@3.1.3 --save，对，这个版本不需要写成npm install swiper vue-awesome-swiper@3.1.3 --save,对比一下啊，下边这个多了个swiper
建议局部引入（这里也只赘述局部引入的方法），毕竟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 }, },

文章图片

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

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