Vue使用swiper插件踩过的坑

       这是我在做仿小米商城项目中遇到的bug，刚开始直接在vue ui中的依赖中直接下载的vue-awesome-swiper，会直接给我下载最新的版本，报错，于是就去 swiper 官方文档按照步骤下载，结果安装之后也是一路报错啊，卸了好几次 node_moduls，经多次查找方法，最终总结如下：

1、不能按照官方文档里安装 npm i swiper ，采用这个方法安装的会是最新的版本，导致安装失败

解决方法：安装 vue-awesome-swiper@3.1.3 成功

2、引入 swiper插件错误而报错：

错误引入：

import { Swiper, SwiperSlide } from "swiper/vue";

于是出现以下错误提示：

解决方法：正确引入方式是（采用解构赋值的方式按需引入）

import { Swiper, SwiperSlide } from "vue-awesome-swiper";

3、引入swiper.css文件 报错

错误引入：

import "swiper.css";

报错，找不到这个文件：

解决方法：

import "swiper/dist/css/swiper.css";

 问题成功解决

4、由于下载的是 vue-awesome-swiper": "^3.1.3"版本，然后引用时用成了 "swiper"，

还会报这样的错误：

解决方法：

首先，检查一下自己安装的哪个版本的swiper 

如果下的是："vue-awesome-swiper": "^3.1.3",

那么就引入：import { Swiper, SwiperSlide } from "vue-awesome-swiper";

5、报错：TypeError: Cannot set property 'params' of undefined"

 解决办法
@3.x 版本的 ---- 引入模块时使用小写
import { swiper, swiperSlide } from “vue-awesome-swiper”;
@4.x 版本的 ---- 引入模块时使用大写
import { Swiper, SwiperSlide } from “vue-awesome-swiper”;
我是3.1.3版本的改成小写的好使了
 

最后附上我完成的memo

<template>
  <div class="index">
    <div class="container">
      <!-- 轮播 start -->
      <div class="swiper-box">
        <swiper :options="swiperOption">
          <swiper-slide v-for="item in sliderList" :key="item.id">
            <a :href="'/#/product/' + item.id">
              <img :src="item.img" />
            </a>
          </swiper-slide>
          <!-- 设置分页及左右两边的箭头 -->
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
      <!-- 轮播 end -->

      <!-- 广告位 start-->
      <div class="ads-box"></div>
      <!-- 广告位 end-->

      <!-- 横幅广告 start-->
      <div class="banner"></div>
      <!-- 横幅广告 end-->

      <!-- 商品列表 start -->
      <div class="product-box"></div>
      <!-- 商品列表 start -->
    </div>
    <service-bar></service-bar>
  </div>
</template>

<script>
import ServiceBar from "../components/ServiceBar.vue";
// 导入轮播图插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
// // 其实当前目录下没有，但是它自己会去node module模块里面查找
import "swiper/dist/css/swiper.css";
export default {
  name: "index",

  data() {
    return {
      // 轮播图的选项
      swiperOption: {
        // 设置循环，自动播放
        autoplay: true,
        // 设置循环点击（否则当点到最后一张就点不动了）
        loop: true,
        // 设置动画
        effect: "cube",
        // 设置动画的一些参数
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6,
        },
        // 指定分页器是哪一个
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 设置前进后退的按钮（可点击跳转）
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      sliderList: [
        {
          id: "42",
          img: require("../../public/imgs/slider/slide-1.jpg"),
        },
        {
          id: "45",
          img: require("../../public/imgs/slider/slide-2.jpg"),
        },
        {
          id: "46",
          img: require("../../public/imgs/slider/slide-3.jpg"),
        },
      ],
    };
  },
  components: {
    swiper,
    swiperSlide,
    ServiceBar,
  },
};
</script>
<style lang="scss" scoped>
.index {
  .swiper-box {
    .swiper-container {
      height: 451px;
      img {
        width: 100%;
      }
    }
  }
}
</style>

了解更多swiper功能，可查看swiper中文网官方文档：

https://www.swiper.com.cn/api/pagination/69.html