vue实现测试题样式，vue-awesome-swiper无法使用coverflow等坑

1. 无法使用coverflow, fade等各种effect

按照vue-awesome-swiper官方文档安装后：

npm install swiper vue-awesom-swiper --save

发现无法使用coverflow的3D效果，看了swiper版本是6以上的，vue-awesome-swiper的版本是4以上的。
swiper中文文档4-6版本的是有effect的，不知道为什么用不了。看了vue-awesome-swiper上的issue，把swiper降到4就能用了。

npm install [email protected]

一开始想不到更新的版本竟然会不支持3D效果，或者是vue-awesome-swiper的兼容问题，找了半天，终于降低版本解决了这个问题。

2. 引入css路径加dist/

同样按照官方文档引入css,然而终端却报错了：找不到swiper/css/swiper.css

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

去node_modules里面看了一下，改成import 'swiper/dist/css/swiper.css'就不报错了。
不知道构建的时候会不会有问题。

3. 使用coverflow效果时，想要实现移动端一屏显示三个，又不希望是等分的

如果是等分的很容易处理，只要设置swiper选项：slidesPerView: 3

但是我想实现如下设计稿：

这时如果同时在css里面设置swipe-slide的宽度，就会有很奇怪的效果，大家可以试一下。
最后我通过将slidesPerView:'auto'，这样设置后就可以设置css宽度，一屏也可以恰好展示三个了。
具体代码如下：

swiperOptions: {
    effect: 'coverflow',
    slidesPerView: 'auto',
    centeredSlides: true,
    coverflowEffect: {
      rotate: 0,
      stretch: -100,
      depth: 700,
      modifier: 0.5,
      slideShadows: false
    },
    touchRatio: 3
  },

CSS:

.swiper-slide {
    width: 320px!important;
    margin-right: 15px;
    height: 450px;
    background: #FFFFFF;
    box-shadow: 0px 0px 15px 0px rgba(197, 197, 197, 0.2);
    border-radius: 7px;
    text-align: center;
  }