为了优雅的使用swiperjs（装杯）

原先引用swiperjs方法

//vue的index.html中
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>

但是，我们不能npm使用吗？

阅读官方文档查询方法

果不其然让我找到了链接它是真的隐蔽。所以我们可以使用npm。

遇到的困难

我们可以正常的引用swiperimport Swiper from 'swiper'console可以打印出Swiper,但是按照文档new后发现没啥变化。哦吼，我好想没引用css。所以我去node_modules\swiper去找css文件，因为我是用的是less所以我决定引用@import "/node_modules/swiper/swiper.less"。由此，我以为我成功了。

再次遇难

毕竟我以为我成功了嘛，所以我去正常开发。开发时候正常都会用到pagination(分页器吧然后我用了，最基础的，文档照抄嘛，发现，哦吼，没用。我就不服吗，我就去看文档，去看swiperjs入口文件swiper.esm.js

哦吼这啥意思，肯定有蹊跷。正好我翻官方文档我看到了。

直觉告诉我，这其中肯定有蹊跷。所以我打印出我实例化的对象数据看看。

看到没，没有pagination方法，所以我弄一下。

import { Swiper,Navigation } from "swiper";
this.mySwiper = new Swiper(".swiper", {
       modules: [Pagination],
      loop: true,
      slidesPerView: 2,
      pagination: {
        el: ".swiper-pagination",
      }  
    });

再打印实例化后的对象，发现有pagination方法啦，有pagination方法啦！单，好像还不行。咱也不知道咋解释，反正我就是直觉感觉没有.swiper-pagination的样式，所以，我就去看了一下引入的less文件是否有.swiper-pagination果不其然没有，所以更换引入@import "/node_modules/swiper/swiper-bundle.css"还没用，所以我low了，我这样引用了<script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>成了！

不是废话

<template>
  <div>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide item1">slider1</div>
        <div class="swiper-slide item2">slider2</div>
        <div class="swiper-slide item3">slider3</div>
      </div>
      <div class="swiper-pagination"></div>
      <!--分页器。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-button-prev"></div>
      <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-button-next"></div>
      <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
    </div>
  </div>
</template>
<script>
// 加载modules模块
import { Swiper, Autoplay, Pagination, Navigation } from "swiper";
export default {
  name: "Swiper",
  data() {
    return {};
  },
  mounted() {
    // 为了查看入口文件的方法
    // import("swiper").then((res) => {
    //   console.log(res);
    // });
    this.mySwiper = new Swiper(".swiper", {
      modules: [Autoplay, Pagination, Navigation],
      loop: true,
      slidesPerView: 2,
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },
      pagination: {
        el: ".swiper-pagination",
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    // 查看实例化数据
    console.log(this.mySwiper);
  },
};
</script>
<style lang="less" scoped>
// 不能应为是less就引用，他缺数据
// @import "/node_modules/swiper/swiper.less";
// 网上引用的也行
// @import "https://unpkg.com/swiper@8/swiper-bundle.css";
// 必须拉出来引用
@import "./swiper-bundle.css";

.swiper {
  width: 600px;
  height: 300px;
  background: #ff4563;
  font-size: 40px;
  color: #fff;
  --swiper-pagination-color: #d20f94;
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
  // 试试改分页器的样式
  /deep/.swiper-pagination-bullet {
    height: 40px;
    width: 40px;
    background: #ff0000;
  }

  .item1 {
    background: #ff9985;
  }
  .item2 {
    background: #88ff55;
  }
  .item3 {
    background: #198299;
  }
  .item1,
  .item2,
  .item3 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>

学习他人

import "swiper/swiper-bundle.css";
<style lang='less'>
//代替@import "./swiper-bundle.css";

\End,样式挺唬人

vue使用swiperjs的问题。