vue中swiper@5.3.6使用，

背景

为啥要耽误说下载的版本号来，因为swiper在6.x的版本使用实在很头疼，所有下载的时候指定下载版本为5.x的

下载命令 ：

npm install swiper@5.3.6 --save

在main.js中引入：

//swiper引入js、css
import 'swiper/js/swiper.min'
import 'swiper/css/swiper.min.css'

在.vue页面中使用：

<template>
    <div class="box">
　　　　//这里往下的class类一定不要改变，改变就会报错
　　　　//Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" >
              <img :src="require('../../assets/img/Ctom1.jpg')"/>
            </div>
            <div class="swiper-slide" >
              <img :src="require('../../assets/img/Ctom2.jpg')"/>
            </div>
            <div class="swiper-slide" >
              <img :src="require('../../assets/img/error404.png')"/>
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
        </div>
    </div>
</template>
<script>

import Swiper from "Swiper"; // 引入swiper依赖  在使用过程中我发现有时候开头字母大写可以成功 、有时候小写 若报错就换成另一个，两者引入取其一

import Swiper from "swiper"; //引入swiper依赖
    export default {
        data() {
            return {

            };
        },
        methods: {
          //封装轮播函数
          getBanner() {
            //调用延迟加载 $nextTick
            this.$nextTick(() => {
              let swiper = new Swiper(".swiper-container", {
                //是否循环
                loop: true,
                autoplay: {
                  //swiper手动滑动之后自动轮播失效的解决方法,包括触碰，拖动，点击pagination,重新启动自动播放
                  disableOnInteraction: false,
                  // 自动播放时间：毫秒
                  delay: 5000
                },
                pagination: {
                  //小圆点
                  el: ".swiper-pagination"
                }
              });
            });
          },
        },
        mounted() {
          this.getBanner(); //轮播
        }
    };
</script>
<style lang="stylus" scoped>
.box
  position absolute
  width 100%
  height 100%
  background red
.swiper-container
  border 1px solid #0f0
  width 600px
  img 
    width 600px
    height 400px

</style>

解决 swiper设置loop为true时，echarts图表不显示在我另外一篇有写

https://www.cnblogs.com/enhengenhengNymph/p/14172595.html