React or Vue2 or Vue3 or TS 使用最新版本 swiper6、swiper7、swiper8

同时支持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 架构，都可以正常使用

三、使用的框架 vue2 + ts + swiper6 （同样兼容 ts 项目，无需特殊处理）

四、使用的框架 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 (
    

      

        
基本效果-小圆点和左右切换
        

          

            

              
            
            

              
            
            

              
            
          
          


          

          

        
      
    
  );
}

export default App;

五、需要哪些模块，直接去定义文件里面找，按住ctro 鼠标放在 swiper 上，直接就跳转到swiper.d.ts中；

微信截图_20210326104455.png

引入相应的模块后，可以参照官网文档设计想要的效果，和之前的使用方式一样；

https://www.swiper.com.cn/

完成，如果有全局引入的方式，还求大神们指点，不胜感激；