vue-awesome-swiper使用遇到的坑

最新版使用

安装
最新版本使用 npm install swiper vue-awesome-swiper --save
安装后可以看到版本是这样的

注册

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)

使用

看起来没什么毛病，但是轮播图的pagination不显示。。。
所以，还是切版本吧，最新的不适合我(⊙o⊙)…
赶紧先卸载 npm uninstall swiper vue-awesome-swiper --save

避坑

1.安装旧版本，需要指定哪个版本，这里选择 Swiper4 v3.1.3 版本
npm install [email protected] --save

2.注册与前面类似，只是把css更换下

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3.使用是一样的（swiperOptions中的参数同 swiper 官方 api 参数）
这时轮播图的pagination显示出来了，该是怎么样的就怎么样啦