同时支持vue2 vue3 React，支持默认安装的 swiper8 版本，支持 TS ，无论是不是TS项目都可使用，亲测有效，支持异步获取数据
由于公司重构项目需要，好多关于轮播的东西都是使用swiper实现的，所以在重构中引入swiper进入了好多坑，希望这篇文档能能给予同学们帮助
最终实现的效果：
微信截图_20210326121325.png
一、使用的框架 vue3 + ts + vue-awesome-swiper （一次失败的尝试,可以不看这段）
使用vue-awesome-swiper
和大多同学一样，网上直接拿来了关于vue-awesome-swiper的文档便开始安装配置，结果发现在main.ts中类型报错，于是各种解决问题，声明类型定义文件等等，结果发现根本不起作用
11111111.png
所以认为是没有类型定义文件，于是在shims-vue.d.ts中定义了
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
declare module 'vue-awesome-swiper'
结果却是：
2222222.png
我去查插件的文档，通过查看issues我会发现了此插件并不支持vue3.0，这不是太坑了吗，浪费了好多时间，所以引入插件还是要看看是不是支持相应框架在引入，切记；但是还是需要swiper，我不死心，发现swiper是支持vue3的，于是。。。
二、使用的框架 vue3 + ts + swiper8（可以仔细看了，能直接用）
安装：
cnpm install swiper --save
我们默认安装的swiper8.0，这个就有一些坑要处理,如下：
1、使用某些功能需要按需引入需要相应的包，如翻页，自动播放等
2、解决了一些同学发现的左右翻页标签，小圆点出不来等问题
3、还无法实现全局引用，都为局部引用
直接上全部代码；本代码为vue3 + ts + swiper8，仔细看代码可以发现，并不需要 swiper 对 ts 进行特殊处理，是因为 swiper6 同时支持了 ts 包含了相应的类型定义文件（xxx.d.ts），所以无论是不是 ts 架构，都可以正常使用
<template>
<div class="home">
<!-- swiper1 -->
<div class="title">基本效果-小圆点和左右切换</div>
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/1.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/2.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/3.png" alt="" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>
</div>
<!-- swiper2 -->
<div class="title">切换效果-effect</div>
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/2.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/3.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/1.png" alt="" />
</div>
</div>
</div>
<!-- swiper3 -->
<div class="title">切换效果-cube</div>
<div class="swiper-container swiper3">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/3.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/1.png" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/2.png" alt="" />
</div>
</div>
</div>
</template>
<script >
import { defineComponent, onMounted } from "vue";
import Swiper, {
Autoplay,
EffectCoverflow,
EffectCube,
Pagination,
Navigation,
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);
// swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
import "swiper/css/bundle";
// swiper.less/sass/css 决定了基础的样式
import "swiper/css";
export default defineComponent({
name: "Home",
components: {},
setup() {
onMounted(() => {
new Swiper(".swiper1", {
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
hideOnClick: true,
},
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
on: {
navigationShow: function () {
console.log("按钮显示了");
},
},
});
new Swiper(".swiper2", {
//循环
loop: true,
//每张播放时长3秒，自动播放
spaceBetween: 25,
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: 1.32,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
});
new Swiper(".swiper3", {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
effect: "cube",
cubeEffect: {
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6,
},
});
});
},
});
</script>
<style scoped>
.title {
text-align: center;
line-height: 50px;
}
.swiper-slide img {
width: 100%;
}
</style>
三、使用的框架 vue2 + ts + swiper6 （同样兼容 ts 项目，无需特殊处理）
<template>
<div class="home">
<!-- swiper1 -->
<div class="title">基本效果-小圆点和左右切换</div>
<div class="swiper-container swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/sw1.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/sw2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="../assets/sw3.jpg" alt="" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
<div class="swiper-button-next"></div>
<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from "vue";
import Swiper, {
Autoplay,
EffectCoverflow,
EffectCube,
Pagination,
Navigation,
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);
// swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
import "swiper/css/bundle";
// swiper.less/sass/css 决定了基础的样式
import "swiper/css";
export default {
name: '',
data() {
return {};
},
mounted() {
// 如果为异步获取数据，需要给标签添加 v-if ，在数据获取到的回调中，如 ajax 的回调中 调用初始化 initSwiper 方法，且v-if 为 true；
// vue3 获取异步数据同理；
// 需要使用 this.$nextTick
// 例：
setTimeout(()=>{
this.$nextTick(() => {
this.initSwiper();
);
})
},
methods: {
initSwiper(){
new Swiper('.swiper1', {
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
loop: true,
on: {
navigationShow: function () {
console.log('按钮显示了');
},
},
});
}
},
};
</script>
<style lang="less" scoped>
.title {
text-align: center;
line-height: 50px;
}
.swiper-slide {
img {
width: 100%;
}
}
</style>
四、使用的框架 react17 + swiper6 （同样兼容 ts 项目，无需特殊处理）
直接引入css会报错，我安装的 swiper8.0.6 版本，如图所示
微信截图_20220225152340.png
查看相应报错、ERROR in ./src/App.js 6:0-38
Module not found: Error: Package path ./swiper-bundle.min.css is not exported from package D:\codeWork\swiper\swiperreact\node_modules\swiper (see exports field in D:\codeWork\swiper\swiperreact\node_modules\swiper\package.json)
说是package.json没有导出相应的包，当然、这个错误在vue中是没有的，那么我们就打开swiper的package.json、如图所示
微信截图_20220225154129.png
很明显，已经导出来了，只是引入的包的名称需要变一下，代码如下：
import './App.css';
// swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
import "swiper/css/bundle";
// swiper.less/sass/css 决定了基础的样式
import "swiper/css";
import Swiper, {
Autoplay,
EffectCoverflow,
EffectCube,
Pagination,
Navigation,
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);
function App() {
new Swiper(".swiper1", {
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
hideOnClick: true,
},
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
on: {
navigationShow: function () {
console.log("按钮显示了");
},
},
});
return (
<div className="App">
<div className="home">
<div className="title">基本效果-小圆点和左右切换</div>
<div className="swiper-container swiper1">
<div className="swiper-wrapper">
<div className="swiper-slide">
<img src={require("./assets/1.png")} alt="" />
</div>
<div className="swiper-slide">
<img src={require("./assets/2.png")} alt="" />
</div>
<div className="swiper-slide">
<img src={require("./assets/3.png")} alt="" />
</div>
</div>
<div className="swiper-pagination"></div>
<div className="swiper-button-prev"></div>
<div className="swiper-button-next"></div>
</div>
</div>
</div>
);
}
export default App;
五、需要哪些模块，直接去定义文件里面找，按住ctro 鼠标放在 swiper 上，直接就跳转到swiper.d.ts中；
微信截图_20210326104455.png
引入相应的模块后，可以参照官网文档设计想要的效果，和之前的使用方式一样；
完成，如果有全局引入的方式，还求大神们指点，不胜感激；
