背景
直接 npm install swiper 发现下了swiper8版本 根据官网教程在vue2中玩不转，所以选择了降级，顺道把swiper看了看，好久没用过了。
关于swiper
当前swiper已经到了8版本。
6版本及以上，已经支持了直接在前端框架中的使用。
6以下版本，不支持直接在前端框架中使用。
也就是说， 6以下版本，没有swiper-vue.js
swiper7、8不能在vue2中使用：
原因是，在swiper源码中，引入的8个vue方法都是vue3中的方法，在vue2中不存在。
如果在vue2中使用swiper7、8会报错。
在vue3中引入swiper7、8会有路径上的错误
官网代码如下：（这样去引入，会找不到相关模块）
// Import Swiper Vue.js componentsimport{ Swiper, SwiperSlide}from'swiper/vue';// Import Swiper stylesimport'swiper/css';正确的引入方式
// Import Swiper Vue.js componentsimport{ Swiper, SwiperSlide}from'swiper/vue/swiper-vue.js';// Import Swiper stylesimport'swiper/swiper.min.css';项目时间比较紧急，而且是vue2的项目，所以比较选择了6版本之前，最稳定的 5.4.5
在页面加载好之后再去装载swiper
<script>import Swiperfrom'swiper';// 注意引入的是Swiperimport'swiper/css/swiper.min.css'// 注意这里的引入exportdefault{name:'CarouselShow',mounted(){newSwiper('.swiper-container',{autoplay:true,loop:true,})}}</script>使用步骤
1、npm install swiper@5.4.5
2、引入
3、swiper的api配置项
<template><divclass="swiper-container"><divclass="swiper-wrapper"><divclass="swiper-slide swiper-slide1">Slide1</div><divclass="swiper-slide swiper-slide2">Slide2</div><divclass="swiper-slide swiper-slide3">Slide3</div></div><!-- 如果需要分页器--><divclass="swiper-pagination"></div><!-- 如果需要导航按钮--><divclass="swiper-button-prev"></div><divclass="swiper-button-next"></div></div></template><script>import Swiperfrom'swiper';// 注意引入的是Swiperimport'swiper/css/swiper.min.css'// 注意这里的引入exportdefault{name:'HelloWorld',data(){return{// swiper实例 实例上有各种方法swiperInstance:null}}mounted(){var swiperInstance=newSwiper('.swiper-container',{// config...})}}</script><style scoped></style>