vue-awesome-swiper爬坑小记

最近公司首页做改造升级，由原先的长图变成轮播，当时觉得搞个插件很快解决，没想到一个插件经历了很多坑。话不多说，直接上demo 

第一步：安装依赖 cnpm install vue-awesome-swiper@2.6.7 --save, cnpm install swiper@4.5.1 --save 注意版本不同可能会存在配置语法不同，大家注意这一个坑

第二步：局部引用或全局引用组件，我在项目中采用的是局部引用

<script>

     import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'

     import 'swiper/dist/css/swiper.css'

     export default {

           components: {

              swiper,

              swiperSlide

          },

        directives: {

            swiper: directive

       },     

      data() {

           return {

              url: '',

              bannerList: [],

              swiperOption: {

                  observer: true, // 修改swiper