swiper版本vue2.X与Vue中使用swiper时左右按钮失效问题……

今天新做的一个项目需要用到swiper，所以引入了swiper 6，发现了一些坑，在这里记录一下……
提示：vue2.X引入swiper最高支持到@^6.4.5版本~

1、引入css文件时报错文件不存在

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

2、左右按钮点击无效

解决方法：需要给按钮绑定事件，如下：

<div class="swiper-container" ref="mySwiper" :options="swiperOptions">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1div>
        <div class="swiper-slide">Slide 2div>
        <div class="swiper-slide">Slide 3div>
    div>
    <div class="swiper-button-prev" @click="prev">div>
    <div class="swiper-button-next" @click="next">div>
div>

<script>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.min.css'
export default {
     
	data() {
     
		return {
     
			swiperOptions: {
     
				loop: false,
                slidesPerView : 4,
                spaceBetween: 53,
				navigation: {
     
                	nextEl: '.swiper-button-next',
                	prevEl: '.swiper-button-prev',
                },
			}
		}
	},
	methods: {
     
		prev() {
     
			this.$refs.mySwiper.swiper.slidePrev();
		},
		next() {
     
			this.$refs.mySwiper.swiper.slideNext();
		}
	}
}
</script>

重要补充

2021-04-09补充一个很重要的点，踩了一个大坑~
刚刚做项目npm install swiper，发现swiper更新到@^6.5.5版本了，然后照常引入使用，以为发现可以成功，but发现自己太天真了，警告了好多°(°ˊДˋ°) °……

立马找到官网，才发现最上面有一句话，大意了°(°ˊДˋ°) °……
只支持vue3.0，但是vue3.0放弃兼容IE11了，本公司还是有很多“老”用户的，非IE不可，so只能用支持vue2x的版本了，然后找到原来项目使用的版本号@^6.4.5，这样就可以啦 (u‿ฺu✿ฺ)

参考网站：
swiper官网API： https://www.swiper.com.cn/api/index.html.
swiper在Vue中使用GitHub：https://github.com/surmon-china/vue-awesome-swiper
在Vue中使用swiper6：https://swiperjs.com/vue#installation