vue-awesome-swiper使用出现的

vue-cli版本为 4.3  安装vue-awesome-swiper时没有指定版本，引发以下两个错误

1.图片不能再一行显示

2.图片无法滑动

 

原因：版本冲突、且css文件路径错误

解决办法： 之前安装的swiper依赖删掉,通过 npm install vue-awesome-swiper@2.6.7 -S 安装固定版本

补充说明： github上指定的swiper3版本对应的vue-awesome-swiper是2.6.7【https://github.com/surmon-china/vue-awesome-swiper】

 

                <div class="recommend-body">
                <swiper :options="swiperOption">
                   <swiper-slide v-for="(item,index) in recommendGoods " :key="index" >
                       <div class="recommend-item">
                           <img :src="item.image" width="80%">
                           <div>{{item.goodsName}}</div>
                           <div>￥{{item.price | moneyFilter}}(￥{{item.mallPrice  | moneyFilter}})</div>
                       </div>
                   </swiper-slide> 
                </swiper>
            </div>

    //引入轮播组件
    import {swiper , swiperSlide} from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'


export default {
  components: {
      swiper , 
      swiperSlide

      
  },

  data() {
    return {
        //轮播图组件，配置、指定每页显示图片数量
        swiperOption:{
            slidesPerView: 3
        },
    }

}

    .recommend-body{
        border-bottom:1px solid #eee;
    }
    .recommend-item{
        width:99%;
        border-right:1px solid #eee;
        font-size:12px;
        text-align: center;
    }