由于网上的教程都是乱七八糟的，自己踩坑后整理在这里

建议使用3.x版本

npm install swiper vue-awesome-swiper@3 --save
# or
yarn add swiper vue-awesome-swiper@3

在所需要的页面中引入

import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
.....
components: { Swiper, SwiperSlide },

ffff

在data中设置组件，使用方法和普通版swiper相似

swiperOptions: {
  slidesPerView: 5,
  spaceBetween: 0,
  loop: true,
  centeredSlides: true,
  effect: "coverflow",
  slideToClickedSlide: true,
  coverflowEffect: {
    rotate: 28,
    stretch: 0,
    depth: 11,
    modifier: 1,
    slideShadows: false,
  },
  navigation: {
    nextEl: ".swiper-button-next2",
    prevEl: ".swiper-button-prev2",
  },
},

定义图片列表（自定义，修改即可）

solutionList: [
  {
    title: "xxxxx",
    content: "xxxxxxxxxx",
    image: "pic103.png",
    detailUrl: "",
  },
]

在dom中添加swiper

<swiper ref="mySwiper" :options="swiperOptions">
  <swiper-slide
    v-for="(item, index) in solutionList"
    :key="index"
    style="width: 290px"
  >
    <div class="item">
      <div class="img">
        <img width="290" :src="require(`./images/${item.image}`)" />
      </div>
      <div class="contenter">
        <div class="con-title">
          <span> {{ item.title }}</span>
        </div>
        <div class="con-inner">{{ item.content }}</div>
        <!-- <div class="btn">
          <el-button type="text">详情 &gt;</el-button>
        </div> -->
      </div>
    </div>
  </swiper-slide>
</swiper>

定义css(按需)

::v-deep.swiper-button-prev2,::v-deep.swiper-button-next2 {position:absolute;width:50px;height:50px;border-radius:50%;border:2px solid #dcdfe6;z-index:1999;width:50px;top:40%;margin-top:-25px;cursor:pointer;font-size:20px;display:flex;align-items:center;text-align:center;i {display:block;margin:0 auto;color:#dcdfe6;}
}
::v-deep.swiper-button-prev2 {left:20px;}
::v-deep.swiper-button-next2 {right:20px;}
::v-deep.swiper-container {width:1440px;margin:0 auto;padding:40px 0;}
::v-deep .swiper-slide-active .con-title span {&::before {display:block;position:absolute;bottom:0;content:"";width:100%;height:4px;background-color:#409fe0;}
}

效果（可能有遗漏，主要整理使用方法）