vue3 使用 swiper轮播库

前言

• 轮播图在前端开发中，是常见需求。而Swiper库是最受前端开发者欢迎的轮播库~
• Swiper在vue2中可以通过npm install swiper vue-awesome-swiper --save安装使用
• 据目前为止， vue-awesome-swiper 库是不支持vue3的。那在实践中如何在vue3中使用Swiper？

一、Swiper引入方式

官方推荐了三种引入方法：

1、HTML标签引入方式

<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
<script src="dist/js/swiper-bundle.min.js"></script>

2、CommonJs引入方式

var Swiper = require('swiper');    

3、ES引入方式（采用）

import Swiper from 'swiper';    

Vue3中可以使用第三种ES模块引入方式：

// 安装swiper包
npm install swiper@5 --save-dev

注意这里一定要使用swiper5版本的，经测试7版本不支持webpack生成的vue3项目，只支持vite生成的vue3项目；6版本使用时有Bug（换页切换按钮功能不生效，分页不显示等）

二、使用Swiper

项目中采用的局部引入，示例如下：
由于swiper不支持vue3，不能使用<Swiper></Swiper>组件，所以采用原始HTML方式使用。

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item,i) in imgs" :key="i"><img :src="item.pic" /></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
import { reactive, onMounted } from 'vue';
import Swiper from 'swiper';   // 引入库
import 'swiper/css/swiper.css'; // 引入样式文件，注意5和6版本的样式文件不一致

export default {
  name: 'HomeSwiper',
  setup() {
    onMounted(() => {
      var mySwiper = new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        pagination: {
          el: '.swiper-pagination',
        },
      });
    })
    let imgs = reactive([
      { pic: require('../assets/img/swiper1.jpg') },
      { pic: require('../assets/img/swiper2.jpg') },
      { pic: require('../assets/img/swiper3.png') }
    ]);
    return {
      imgs
    };
  },
};
</script>
<style lang="less" >
.swiper-container {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  .swiper-slide {
    width: 100% !important;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>

以上代码，即可看到轮播效果

总结

本文只是一个过渡实现方案，供小伙伴们参考，随着vue3使用者增加，未来Swiper一定会对vue3的支持度越来越高~~