vue中使用Bootstrap、swiper(swiper5及以下)

Bootstrap、swiper这两者的效果在element中都有着相似的组件

使用Bootstrap

Bootstrap的插件全部依赖jQuery,在vue中安装Bootstrap时也要安装jQuery

npm i jquery

npm i bootstrap

在main.js中

import 'jquery/dist/jquery.min'

import 'bootstrap/dist/css/bootstrap.css'

这样就可以使用啦(～￣▽￣)～！！！

Bootstrap官网链接[：](Bootstrap中文网 (bootcss.com))

使用swiper(swiper5及以下)

安装

yarn add swiper@5.x vue-awesome-swiper

引入（main中）

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)

组件中使用

<template>
    <swiper  ref="mySwiper" :options="swiperOptions">
            <swiper-slide><img src="..." class="img-responsive" alt=""/></swiper-slide>
            <swiper-slide><img src="..." class="img-responsive" alt=""/></swiper-slide>
            <swiper-slide><img src="..." class="img-responsive" alt=""/></swiper-slide>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </swiper>
</template>

export default{
data(){
    return{
          swiperOptions: {
            slidesPerView: 3,
            pagination: { el: '.swiper-pagination' },
          }
        }
    },
    mounted(){
    new Swiper ('.swiper-container', {
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    // 自动轮播
    autoplay: {
    delay: 1000,
    stopOnLastSlide: false,
    disableOnInteraction: false,
    }
  })
  }
}

详见[：](GitHub - surmon-china/vue-awesome-swiper: 🏆 Swiper component for @vuejs)

swiper6使用详见swiper官网[：](Swiper Vue.js Components (swiperjs.com))