swiper,vue-awesome-swiper在移动端的使用

1.安装插件

npm install swiper@4.5.1 --save
npm install vue-awesome-swiper@3.1.3 --save

2.在assets底下放入文件

将node_modules中的复制过来

swiper文件中保留swiper.css,vue-awesome-swiper文件中保留:

3.在main.js中引入

import Vue from 'vue'
import './assets/swiper.css'
import VueAwesomeSwiper from  './assets/vue-awesome-swiper/src/index.js'
Vue.use(VueAwesomeSwiper);

4.使用

<swiper :options="swiperOption" ref="swiper">
  <swiper-slide>
    11111
  </swiper-slide>
  <swiper-slide>
    222
  </swiper-slide>
  <swiper-slide>
    333
  </swiper-slide>
</swiper>

 data() {
    return {
      swiperOption: {
        loop: false,
        allowTouchMove: true,
        initialSlide: 1,
      },
    }
  },