vue2 swiper5.x 引入animate

要在Vue2中使用Swiper5.x并引入animate，需要进行以下步骤：

1. 首先，在项目中安装Vue2和Swiper5.x，可以通过npm或yarn进行安装：

   npm install vue@2.x swiper@5.x

2. 在Vue的入口文件（通常是main.js）中导入Vue和Swiper：

   import Vue from 'vue';
   import Swiper from 'swiper';
   import 'swiper/swiper-bundle.css';

3. 创建一个Vue组件，并在该组件中使用Swiper轮播图插件。在Vue组件中导入SwiperAnimate插件：

   import SwiperAnimate from 'swiper/animate';

   export default {
     mounted() {
       SwiperAnimate.installModule();
     },
   };

4. 在组件的template中使用Swiper的HTML结构，并添加必要的类和属性：

   <template>
     <div class="swiper-container">
       <div class="swiper-wrapper">
         <div class="swiper-slide">Slide 1</div>
         <div class="swiper-slide">Slide 2</div>
         <div class="swiper-slide">Slide 3</div>
       </div>
     </div>
   </template>

5. 在Vue组件的mounted钩子函数中，初始化Swiper实例并传入相应的配置项和选项：

   import Swiper from 'swiper';

   export default {
     mounted() {
       new Swiper('.swiper-container', {
         // 配置项和选项
         loop: true,
         autoplay: true,
         speed: 300,
         // 其他配置项
       });
     },
   };

6. 最后，在样式文件（如App.vue或单独的样式文件）中添加Swiper的样式，以及animate的样式：

   @import 'swiper/swiper-bundle.css';
   @import 'swiper/animate.min.css';

此时，你已经在Vue2中成功引入了Swiper5.x，并添加了animate动画插件。可以根据Swiper和animate的文档进行进一步的配置和使用。