vue项目中使用vue-awesome-swiper遇到的坑

安装vue-awesome-swiper插件

1.注意,有坑

通过 npm install --save vue-awesome-swiper 安装的最新插件,在运行过程中你会发现,图片并不是一张张的轮播,要么整个swiper-container在左右轮播,要么是图片不显示(尽管路径是正确的)

解决方案:

之前安装的swiper依赖删掉,通过 npm install vue-awesome-swiper@2.5.4 -S 安装固定版本，并重新运行npm run dev 即可解决非正常轮播的问题.

2.引用swiper

可以在main.js里面直接配置,具体如下:

1.import Vue from 'vue'
2.import VueAwesomeSwiper from 'vue-awesome-swiper'
3.Vue.use(VueAwesomeSwiper)

也可以在模板中引用

1.import { swiper, swiperSlide } from 'vue-awesome-swiper'
2.components: { swiper, swiperSlide }

下面的代码该怎么写就怎么写啦

个人建议,swiper不需要设置成全局的，这样反倒会拖累整个项目性能，我们哪里需要就在哪里引入.

喜欢的话,还请点个赞哟_(≧▽≦)/啦啦啦