swiper，vue中swiper的应用，swiper各个版本在vue项目中应用

背景

直接 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 components
  import {
    
     Swiper, SwiperSlide } from 'swiper/vue';
  // Import Swiper styles
  import 'swiper/css';

正确的引入方式

  // Import Swiper Vue.js components
  import {
    
     Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
  // Import Swiper styles
  import 'swiper/swiper.min.css';

项目时间比较紧急，而且是vue2的项目，所以比较选择了6版本之前，最稳定的 5.4.5

在页面加载好之后再去装载swiper

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
export default {
    
    
    name: 'CarouselShow',
    mounted() {
    
    
        new Swiper('.swiper-container', {
    
    
            autoplay: true,
            loop: true,
        })
    }
}
</script>

使用步骤

1、npm install [email protected]
2、引入
3、swiper的api配置项

<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide1">Slide 1</div>
            <div class="swiper-slide swiper-slide2">Slide 2</div>
            <div class="swiper-slide swiper-slide3">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>  
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入

export default {
    
    
    name: 'HelloWorld',
    data() {
    
    
    return {
    
    
         // swiper实例  实例上有各种方法
         swiperInstance: null
      }
    }
    mounted() {
    
    
		var swiperInstance = new Swiper('.swiper-container', {
    
    
			// config...
		})
	}
}
</script>
<style scoped>
</style>