vue-awesome-swiper安装使用时的坑
关于vue-awesome-swiper官网:https://github.com/surmon-china/vue-awesome-swiper官方示例:https://github.surmon.me/vue-awesome-swiper/概述:vue-awesome-swiper是基于swiper的Vue组件。是swiper推荐的在vue中使用swiper的方式。关于SwiperSwiper
关于vue-awesome-swiper
官网:https://github.com/surmon-china/vue-awesome-swiper
官方示例:https://github.surmon.me/vue-awesome-swiper/
概述:
vue-awesome-swiper是基于swiper的Vue组件。是swiper推荐的在vue中使用swiper的方式。
关于Swiper
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站、移动web apps,native apps和hybrid apps。主要是为IOS而设计的,同时,在Android、WP8系统也有着良好的用户体验,Swiper从3.0开始不再全面支持PC端。因此,如需在PC上兼容更多的浏览器,可以选择Swiper2.x(甚至支持IE7)。
Swiper中文网:
Swiper版本最新为Swiper6
旧版本包括5、4、3、2
版本演进说明:https://www.swiper.com.cn/about/us/index.html
为什么强调版本?
因为vue-awesome-swiper根据不同的swiper版本也对应有不同的版本,主要有三个版本:
Vue-Awesome-Swiper - v2.6.7 对应 Swiper3
Vue-Awesome-Swiper - v3.1.3 对应 Swiper4
Vue-Awesome-Swiper - v4.1.1 对应 Swiper6(截止2020/08/10)
因此对于网上找到的使用教程,或是接手原有项目中应用到了Vue-Awesome-Swiper需要改造,应先确认其版本,对应到相应的Swiper版本,再到Swiper中文网中查看相应的教程,否则会出现各种各样的问题。
安装使用中遇到的坑:
当按照官网:
https://github.com/surmon-china/vue-awesome-swiper
的教程一步步完成组件安装,引入,注册后,却报错:
1.Module not found: Error: Can't resolve 'swiper/css/swiper.css' in ...
2.Module not found: Error: Can't resolve 'swiper/swiper-bundle.css' in ...
查看package.json,发现安装swiper是4版本的,而安装的Vue-Awesome-Swiper是4.1.1。
觉得可能是由于版本号不对应导致(应该是原先项目已先安装了4版本的swiper),因此将vue-awesome-swiper和swiper都卸载重新安装:
npm uninstall vue-awesome-swiper
npm uninstall swiper
npm install swiper vue-awesome-swiper --save
依然报错:
Module build failed: Error: ENOENT: no such file or directory, open 'D:\developer\git\xxx\node_modules\swiper\dist\js\swiper.esm.bundle.js'
进入node_modules目录查找,确实没有在路径下发现swiper.esm.bundle.js这个文件,而是放在了外层的目录,说明是build的时候出了什么问题。
百度最接近的答案是:
vue + swiper 踩坑记实(dom7、es6)
https://www.jianshu.com/p/54709ba140aa
其中有建议降级处理
因此尝试卸载重新安装旧版本:
npm uninstall vue-awesome-swiper
npm uninstall swiper
npm install swiper@4.5.1
npm install vue-awesome-swiper@3.1.3
此时项目依然报错:
1.Module not found: Error: Can't resolve 'swiper/css/swiper.css' in ...
2.Module not found: Error: Can't resolve 'swiper/swiper-bundle.css' in ...
不过这是由于版本变化导致css文件位置改变导致的,将导入的语句从:
import 'swiper/css/swiper.css'
import 'swiper/swiper-bundle.css'
修改为:
import 'swiper/dist/css/swiper.css'
即可
修改后加入Html标签
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
报错:
Cannot set property 'params' of undefined
原因依然是版本间引入的语句不一致导致的
将组件引入语句从
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
修改为:
import { swiper, swiperSlide } from 'vue-awesome-swiper'
即可
参见Github Issues:
https://github.com/surmon-china/vue-awesome-swiper/issues/499
至此安装的问题全部解决。
总结:
建议一开始就安装vue-awesome-swiper 3.1.3版,安装对应的swiper版本
然后全部按照3.1.3版本的文档来使用即可。
附:
vue-awesome-swiper 3.1.3版地址:
https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3
更多推荐
所有评论(0)