vue-awesome-swiper默认安装版本

这几天因为项目要使用轮播图,所以打算引入swiper,网上看了别人的代码,自己也引入了vue-awesome-swiper,但是没想到我安装之后,错误就接二连三,各种报错,难受啊···经过2天的琢磨和找资料,终于解决了,今天把我遇到的坑给大家列出来:

当我们vue项目使用轮播图时,一般都是安装vue-awesome-swiper,如果你不指定版本,webpack默认版本是最新的vue-awesome-swiper@4.X版本,但是4.0对应的swiper版本是6.0,目前swiper官网最新的文档也只到了4.0,还么有更新6.0文档,所以当你按照swiper4.0的文档搭配vue-awesome-swiper@4.X写的时候会一直出现各种报错,css路径引入报错,swiper.js路径报错,设置自动轮播失效等一系列问题,崩溃上天了,折腾了2天时间,,,巨坑
下面把我遇到的问题,看到的可以及时避坑,以免浪费生命

版本匹配问题

  1. vue-awesome-swiper@4.X对应swiper@6.0版本,目前没有swiper文档,无法正常使用。(不推荐,不多废话)
  2. vue-awesome-swiper@3.X对应swiper@4.0版本,文档尚全:(推荐)
    vue-awesome-swiper文档链接:官方文档
    swiper文档链接:官方文档
  3. vue-awesome-swiper@2.X对应swiper@3.0版本,文档链接同上:(版本过早,可以正常使用,个人不太推荐)
  4. 安装方式:以npm为例,
    切记不要使用默认的命令安装vue-awesome-swiper(npm install vue-awesome-swiper)切记!切记!切记!
    使用指定版本对应安装(npm install vue-awesome-swiper@3 --save-dev 和 npm install swiper@4)
    或者(npm install vue-awesome-swiper@2 --save-dev 和 npm install swiper@3)
  5. 需要什么api去官方文档对照调用即可。

swiper的css路径引入问题

如果你默认安装的swiper@6.x版本,那么css引入路径是:
import “swiper/swiper-bundle.css”;

swiper@4.x和swiper@3.x的引入路径才是我们常用的:
import “swiper/dist/css/swiper.css”;
如果路径没有匹配对,搞反了,那你会很痛苦的。

好了,总结完毕,希望对各位有用。

小结1


  1. 不要随便抄网上别人分享的代码,有可能你们版本不一样,按照他的方法写你会各种报错,痛苦难耐。 ↩︎

Logo

前往低代码交流专区

更多推荐