vue版本：

C:\Users\boxin>vue -V
@vue/cli 5.0.4

Swiper版本：

"swiper": "^6.5.6",

1.安装Swiper，指定版本

npm install swiper@6.5.6 --save

Swiper部分独立成子组件，新建swiperCom.vue下
2.引入swiper组件

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

3.引入样式文件

// Import style (>= Swiper 6.x)
import "swiper/swiper-bundle.css";

4.从qq音乐等软件保存数张轮播图片至本地，设置图片数组

    data: function () {
      return {
        imgs: [
          require("../assets/img/swiper1.jpg"),
          require("../assets/img/swiper2.jpg"),
          require("../assets/img/swiper3.jpg"),
          require("../assets/img/swiper4.jpg"),
        ],
      };
    },

5.JS:

export default {
    name: "swiperCom",
    data: function () {
      return {
        imgs: [
          require("../assets/img/swiper1.jpg"),
          require("../assets/img/swiper2.jpg"),
          require("../assets/img/swiper3.jpg"),
          require("../assets/img/swiper4.jpg"),
        ],
      };
    },
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };

6.template模板：

<swiper class="swiper-container">
      <swiper-slide class="swiper-slide" v-for="(item, i) in imgs" :key="i">
        <img :src="item" alt=""/>
      </swiper-slide>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
</swiper>

7.为正常显示自动滚动、循环、分页等轮播功能，引入Swiper模块并使用

// Import Swiper core and required modules
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from "swiper";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);

8.相关模块通过setup()返回使用：

return {
    onSwiper,
    onSlideChange,
    modules: [Navigation, Pagination, Scrollbar, A11y],
};

9.template配置参数

<swiper
      class="swiper-container"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :pagination="{ clickable: true }"
      :autoplay="{ autoplay: true }"
      loop
    >

10.相关样式调整：

.swiper-container {
  width: 7.1rem;
  height: 3rem;
  border-radius: 0.1rem;
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #248cc0;
  --swiper-navigation-color: #248cc0;
  --swiper-navigation-size: 20px;
}
.swiper-slide img{
  width: 100%;
}

11.引入主组件，npm run serve启动后轮播图效果：