vue使用swiper插件

最近在用VUE写一个单页项目，涉及到的轮播组件比较多。就想到了在项目中引入swiper进行开发，使用方法记录如下：

1、项目中安装swiper：

npm install [email protected] --save-dev

2、组件中引入（或者在main.js中全局引入都可以）

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

3、实例中使用

export default {
  data () {
    return {
      swiper: null
    }
  },
  mounted () {
    this.swiper= new Swiper('.swiper-container', {
      autoplay: 3000,
      speed: 1000,
      autoplayDisableOnInteraction: false,
      loop: true,
      centeredSlides: true,
      slidesPerView: 2,
      pagination: '.swiper-pagination',
      paginationClickable: true,
      prevButton: '.swiper-button-prev',
      nextButton: '.swiper-button-next'
    })
  }
}

最终实现效果：