1 通過引入swiper.js 以及swiper.css
在頁面或者組件使用swiper的地方引入
js css 下個(gè)包packge下有

// var Swiper = require('@/lib/tools/swiper/swiper-bundle.min.js')  ---都行
import Swiper from '@/lib/tools/swiper/swiper-bundle.min.js'  ---都行
import '@/lib/tools/swiper/swiper-bundle.min.css' /*引入swiper公共樣式*/

初始化方法

initSwiper:function(){
  var swiper = new Swiper('.swiper-container',{
    direction: 'horizontal', // 垂直切換選項(xiàng) horizontal vertical
      speed:300,//速度
      autoplay : {
          delay:3000
      },
      grabCursor:true,//默認(rèn)：false舉例：true
      setWrapperSize:true,//disflex 布局
      freeMode : true,//抵抗反彈
      loop: true, // 循環(huán)模式選項(xiàng)
      // 如果需要分頁器
      pagination: {
          el: '.swiper-pagination',
      },
      // 如果需要前進(jìn)后退按鈕
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
      // 如果需要滾動(dòng)條
      scrollbar: {
          el: '.swiper-scrollbar',
      },
  });
}

引用

mounted(){
  this.initSwiper()
},

2 全局注冊(cè)

npm install swiper vue-awesome-swiper --save  安裝

main.js

import VueAwesomeSwiper from 'vue-awesome-swiper';

// If you use Swiper 6.0.0 or higher
import 'swiper/swiper-bundle.css' // import style
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

.vue

<div class="swiper2Wrap">
    <swiper ref="mySwiper">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</div>

swiperOption 無效 采用init方法初始化