Vue swiper轮播的报错解决和使用

一、swiper插件下载

问题一：照着一些老一版教程只安装了vur-awesome-swiper

这种情况肯定是用不了的，需要先npm install swiper --s

npm install swiper --s

问题二：引入swiper时没引入css

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'

通常就是这样写的路径，可以自己在node-modules里找一下，可以全局引入也可以局部引入，我是局部引入的

如果swiper版本高的话6.0以上不能用旧的导入方式，在main.js里

import "swiper/swiper-bundle.css";

问题三：过程中可能出现各种报错总结起来问题大部分就是版本不匹配之类的

npm install vue-awesome-swiper@6.3.5 --save

另外main.js引入：

//新版本

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)


//旧版本
import vueSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(vueSwiper)

二、swiper的使用

 在swiper组件中：

<template>
  <div class="swiper-main">
    <swiper :options="swiperOption">
      <div class="swiper-button-prev" slot="button-prev"></div>
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <img :src="item.imgUrl" alt="" />
      </swiper-slide>

      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <div class="swiper-pagination"></div>
  </div>
</template>

我简单实验写死了一些图片数据，设置了swiper的一部分用得到的相关参数比如轮播速度、下面的小圆点页数、左右翻页这些

<script>
// import 'swiper/swiper-bundle.css'
import "swiper/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
      swiperList: [
        {
          id: 1,
          imgUrl: "/images/swiper1.png",
        },
        {
          id: 2,
          imgUrl: "/images/swiper2.png",
        },
        {
          id: 3,
          imgUrl: "/images/swiper3.png",
        },
        {
          id: 4,
          imgUrl: "/images/swiper1.png",
        },
        {
          id: 5,
          imgUrl: "/images/swiper2.png",
        },
        {
          id: 6,
          imgUrl: "/images/swiper3.png",
        },
      ],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: 3000,
        speed: 1000,
      },
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
};
</script>

具体样式的话自己调整就好，用检查工具看看他的类名是什么然后修改成自己想要的就行了