装包

== bug1：装包报错，或者引入报错，是版本的为题，降低版本即可解决==
== bug2：页面刷新后报错：window在服务端不识别，所以使用后面的方案二==

"swiper": "^4.0.7",
"vue-awesome-swiper": "^3.1.3"

方案一：页面中使用（废弃）

<div>
		<swiper
          ref="mySwiper"
          :options="swiperOptions"
          style="width: 200px; height: 200px"
        >
          <swiper-slide
            v-for="item in 5"
            :key="item"
            style="height: 200px; background: blue"
          >
            11
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
</div>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
      swiperOptions: {
        loop: true,
        slidesPerView: 3, // 一屏3个
        centeredSlides: false, // 第一个默认居左
        spaceBetween: 70, // 间隔
        autoplay: true, // 自动播放
        grabCursor: true, // 鼠标放上去显示小手
        pagination: {  // 分页
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
        },
        on: {
          slideChange() {
            console.log("onSlideChangeEnd", this);
          },
          tap() {
            console.log("onTap", this);
          },
        },
      },
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
};
</script>

方案二：使用插件的形式（推荐）

== bug：有的版本可能轮播图不会正常展示，需要试 ==

"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.0.0",
"nuxt": "^2.15.8",

• plugins/swiper.js

import Vue from 'vue'
import css from 'swiper/css/swiper.css' // 注意css路径
import VueAwesomeSwiper from 'vue-awesome-swiper'
export default () => {
Vue.use(VueAwesomeSwiper,{css})
}

• nuxt.config.js

 plugins: [
    { src: "~/plugins/swiper.js", ssr: false }
  ],

• components/swiperCpt.vue

<template>
  <div v-swiper:mySwiper="swiperOption" style="width: 100%">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in list" :key="item.id">
        <div>
          <img
            :src="item.fileId"
            class="w100 mb-20"
            style="height: 352px; border-radius: 8px"
            alt=""
          />
          <p class="size-24 line-1">{{ item.title }}</p>
          <p>
            {{ item.information }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        // loop: true,
        slidesPerView: 3,
        centeredSlides: false,
        spaceBetween: 70,
        autoplay: true,
        grabCursor: true,
      },
    };
  },
  props: ["list"],
  mounted() {},
};
</script>

• 页面直接使用组件

<swiperCpt></swiperCpt>