声明关于swiper:
1、Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站、移动web apps,native apps和hybrid apps。主要是为IOS而设计的,同时,在Android、WP8系统也有着良好的用户体验,Swiper从3.0开始不再全面支持PC端。因此,如需在PC上兼容更多的浏览器,可以选择Swiper2.x(甚至支持IE7)。
2、vue-awesome-swiper是基于swiper的Vue组件。是swiper推荐的在vue中使用swiper的方式。
安装
我们在vue项目安装swiper时往往会使用npm i swiper命令进行安装,一般安装到的是最新版的swiper,从而会导致出现这样的报错:
报错
Module not found: Error: Can't resolve 'swiper/dist/css/swiper.css' in ...
Module not found: Error: Can't resolve 'swiper/swiper-bundle.css' in ...
这是由于版本变化导致css文件路径位置改变
解决方法:
卸载重新安装旧版本
npm uninstall swiper
npm uninstall vue-awesome-swiper
npm install swiper@4.5.1
npm install vue-awesome-swiper@3.1.3
总结:
建议一开始就安装vue-awesome-swiper 3.1.3版,安装对应的swiper版本
【swiper遇到的坑】然后全部按照3.1.3版本的文档来使用即可。