在Vue 2中使用Swiper，你需要安装与Vue 2兼容的Swiper版本

在Vue 2中使用Swiper，你需要安装与Vue 2兼容的Swiper版本，并且通常还需要安装vue-awesome-swiper这个Vue组件来更方便地集成Swiper。以下是如何在Vue 2项目中使用Swiper的步骤：

1. 安装Swiper和vue-awesome-swiper

首先，你需要通过npm或yarn来安装Swiper和vue-awesome-swiper。确保安装与Vue 2兼容的版本。

npm install swiper@4 vue-awesome-swiper@3.1.3 --save

# 或者使用

yarn yarn add swiper@4 vue-awesome-swiper@3.1.3

注意：Swiper 4和vue-awesome-swiper 3.1.3是与Vue 2兼容的版本。

2. 引入Swiper和vue-awesome-swiper

在你的Vue组件或主入口文件（通常是main.js）中，你需要引入Swiper的CSS和vue-awesome-swiper。

// main.js  
import Vue from 'vue';  
import VueAwesomeSwiper from 'vue-awesome-swiper';  
import 'swiper/swiper-bundle.css'; // 确保引入正确的CSS文件路径  
  
Vue.use(VueAwesomeSwiper);  
  
// 如果你使用Vue的单文件组件，你可以在组件内部引入  
// import 'swiper/swiper-bundle.css';  
// import { swiper, swiperSlide } from 'vue-awesome-swiper';  
// export default {  
//   components: {  
//     swiper,  
//     swiperSlide  
//   }  
//   // ...  
// }

3. 在Vue组件中使用Swiper

现在，你可以在你的Vue组件中使用Swiper了。

<template>  
  <div>  
    <swiper :options="swiperOptions">  
      <swiper-slide v-for="(slide, index) in slides" :key="index">  
        <img :src="slide.image" :alt="slide.alt">  
      </swiper-slide>  
  
      <!-- 如果需要分页器 -->  
      <div class="swiper-pagination" slot="pagination"></div>  
  
      <!-- 如果需要导航按钮 -->  
      <div class="swiper-button-next" slot="button-next"></div>  
      <div class="swiper-button-prev" slot="button-prev"></div>  
  
      <!-- 更多自定义选项，如滚动条、效果等 -->  
    </swiper>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      swiperOptions: {  
        slidesPerView: 1,  
        spaceBetween: 30,  
        loop: true,  
        navigation: {  
          nextEl: '.swiper-button-next',  
          prevEl: '.swiper-button-prev',  
        },  
        pagination: {  
          el: '.swiper-pagination',  
          clickable: true,  
        },  
        // 更多配置项...  
      },  
      slides: [  
        { image: 'image1.jpg', alt: 'Image 1' },  
        { image: 'image2.jpg', alt: 'Image 2' },  
        // ...更多slide数据  
      ],  
    };  
  },  
  // ...  
};  
</script>  
  
<style scoped>  
/* 你的样式 */  
</style>

4. 注意事项

• 确保你引入的Swiper CSS文件路径是正确的。
• 如果你在单文件组件中局部引入vue-awesome-swiper，确保你在组件的components选项中注册了swiper和swiperSlide。
• 根据你的需求，你可能需要调整swiperOptions中的配置项来定制你的轮播图。

 

vue中swiper vue-awesome-swiper的使用方法及各种坑解决：

https://www.jb51.net/article/272679.htm