安装

不推荐高版本(有bug),反正能正常使用就行.

cnpm install vue-awesome-swiper swiper@5.4.5 --save

main.js引入

import Vue from "vue"
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

组件使用

 <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="(item, index) in partsMainData.partList" :key="index" :data-index="index">
              <div class="list-item">
                <span :class="{ active: index == activeIndex }">{{ item.mainGroupId }}-{{ item.name }}</span>
              </div>
            </swiper-slide>
          </swiper>

引入包

  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'

swiper配置项及组件引入

export default {
    data() {
      return {
        swiperOption: {
          slidesPerView: "auto",
          spaceBetween: 10,
          freeMode: true,
          on: {
            click: this.sweiperClick,
          },
        },
       },
     components: {
      Swiper,
      SwiperSlide,
    },
   }

到这里应该可以正常使用了
遇到过的报错问题

[Vue warn]: Unknown custom element: <swiper> - did you register the
 component correctly? For recursive components, make sure to provide
  the "name" option.

造成原因:

1. 引入顺序不对
   得先引入vue再引入swiper
2. 引入组件时写法错误
   引入组件时应该大写:Swiper,SwiperSlide(vscode在components里写Swiper时正确的话会变色)