记录一次vue里使用swiper

首先下载依赖

npm i vue-awesome-swiper --save
(cnpm也可以)

然后在main.js内进行引用

import VueAwesomeSwiper from 'vue-awesome-swiper'
// import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
var foo = 'bar';

之后vue文件的template内

<swiper :options="swiperOption" class="swiper-container" id="indwper">
   <swiper-slide>
      <div class="swiper-slide"><img src="../../../assets/img/banner2.png" alt=""></div>
    </swiper-slide>
    <swiper-slide>
      <div class="swiper-slide"><img src="../../../assets/img/banner1.png" alt=""></div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>

vue文件的script内

import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import * as animate from '../../../assets/js/jquery-1.9.1.js'//这里根据个人需求加不加都可以


  export default {
    name: '',
    data () {
      return {
        swiperOption: {
          loop: true,
          // resistanceRatio: 0,
          observer:true,
          autoplay: {
            delay: 2000,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },