插件的使用_为什么插件拉入插件中心里面会变成打开索引-CSDN博客

本文链接：https://blog.csdn.net/qq_45404030/article/details/126671865

本文介绍了在Vue项目中如何引入和使用Swiper 3.4.2版本创建轮播图。首先通过npm安装包，然后在组件中导入Swiper和样式。在mounted阶段初始化轮播图，并配置各项参数。内容包括循环播放、自动播放、分页器和导航按钮等功能。当数据从后台获取时，需确保图片加载完成后渲染。同时提到了版本对应问题和样式引用错误可能导致的问题。最后，文章还简单提及了如何引入和使用bootstrap。

摘要由CSDN通过智能技术生成

轮播图的使用

很多插件都是通过$nextTick来进行使用。

1.轮播图
 3.4.2版本所使用的api

首先应该引入npm包
npm install swiper@3.4.2 --save
然后引入swiper以及swiper样式

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

然后就是静态页面
特别注意，如果是从后台请求到轮播图的数据的话，那么就等图片加载完成之后再进行渲染，也就是通过setTick来进行使用。

<!--基础存放容器-->
    <div class="swiper-container">
      <!-- 需要进行轮播的部分 -->
      <div class="swiper-wrapper">
        <!-- 每个节点 -->
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
      </div>
      <!--如果需要使用分页器-->
      <div class="swiper-pagination swiper-pagination-white"></div>
      <!-- 如果需要使用前进后退按钮 -->
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
    </div>
    data () {
    return {
      swiper: null
    }
  },
  mounted () {
    this.initSwiper()
  },
  methods: {
    initSwiper () {
      this.swiper = new Swiper('.swiper-container', {
        // 设置轮播的循环方式
        loop: true,

        // 设置自动播放间隔时间
        autoplay: 2000,

        // 轮播效果,默认为平滑轮播
        effect: 'slide',

        // 分页器
        pagination: '.swiper-pagination',
        paginationClickable: true,

        // 前进后退按钮
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',

        // 用户中断轮播后续播
        autoplayDisableOnInteraction: false
      })
    }
  }
  .swiper-container {
  width: 500px;
  height: 450px;
  margin-top: 40px;
}
.swiper-slide{
  width: 100%;
  background-color: red;
  object-fit: cover;
}

最后只要调用这个轮播图组件，然后就大功告成了。

如果你想要使用不同版本的话，操作步骤是:

首先确定你想要使用的版本
找到你想要的版本
swiper版本
然后选择vue-awesome-swiper的版本与swiper版本对应。
vue-awesome-swiper版本
具体例子，swiper5的具体操作。
swiper的创建与使用
然后通过这个来选择不同的样式。
不同的swiper样式
如果发现你的swiper运行不起来的话，首先查找node-modules中是否有我们有的包，同时查询包的内容是否与我们写的内容对应，文档里面的引入样式是五花八门的，明明是swiper4的样式，写在swiper5中，这样就会引起错误。

bootstap的使用

找到官网，然后引入bootstrap，jquery，样式等

//引入bootstrap
npm i bootstrap
//引入jquery
npm i jquery
configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        "window.$": "jquery",
        Popper: ["popper.js", "default"],
      }),
    ],
  },
 //引入bootstrap样式
import "bootstrap/dist/css/bootstrap.css";