vue默认安装vue-awesome-swiper版本，避坑指南

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. 不要随便抄网上别人分享的代码，有可能你们版本不一样，按照他的方法写你会各种报错，痛苦难耐。 ↩︎