项目中运用swiper做一个H5页面所以会用到插件
目前网上的vue-awesome-swiper中文文档已经与swiper最新的版本不匹配了
安装
//直接安装版本3即可,自动会选择3.1.3版本
cnpm i vue-awesome-swiper@3 -S
//或者手动指定
cnpm i vue-awesome-swiper@3.1.3 -S
引入
全局引入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
//引入样式
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { 全局组件的默认选项 } */)
局部引入
<script>
//页面引入swiper
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
},
};
</script>
注意事项:
- 页面引入即可,没必要全局引入,因为很少所以页面都要使用轮播的。全局引入只会增加额外的加载缓存和加载速度。全部贴出来自己衡量吧
- 版本,请使用3.1.3,别想着用什么4以上的或别的版本,目前就这个版本最稳定,不相信可以自己去测试,掉坑里可别怪没提醒!
配置options。
查看github的vue-awesome-swiper的官方示例:
https://github.surmon.me/vue-awesome-swiper/