在vue2中，使用vue-awesome-swiper的坑

vue-awesome-swiper是基于swiper的Vue组件。是swiper推荐的在vue中使用swiper的方式。

• 官方demo网站：v1.github.surmon.me/vue-awesome…
• 文档地址：github.com/surmon-chin…

swiper对应版本：

• Swiper 5-6 vue-awesome-swiper@4.1.1 (Vue2)
• Swiper 4.x vue-awesome-swiper@3.1.3 (Vue2)
• Swiper 3.x vue-awesome-swiper@2.6.7 (Vue2)

一、安装

最好带上版本，安装这一步也有坑，最新版的好像不一样，用的旧版就没注意。

npm install vue-awesome-swiper --save-dev

二、引入

上面提到的demo很贴心，都有代码示例，完美！！！坑来了。。。

代码粘上，运行，报错，找不到什么CSS,艹，这不是完犊子吗？demo怎么写的？翻网上教程，一堆乱七八糟的帖子，什么装对应版本的swiper的，什么卸载再重新下载的。。。

翻到一篇帖子很完美，写上，行了。（原贴，写的很详细：vue中swiper vue-awesome-swiper的使用方法及各种坑解决）

引入组件，上面截图的demo红框圈出来的就是问题所在，css地址不对，还有帖子说是大小写不对。正确引入方式：

import {swiper, swiperSlide} from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';

照着这么引入就可以正常运行了，其他配置照着demo写就行。

问题来了，现在还有多少人用swiper？都手写轮播吗？都手写demo示例的那些页面效果吗？