vue-awesome-swiper踩坑记录

一、使用vue-awesome-swiper的正确方法

vue-awesome-swiper是基于swiper的，安装vue-awesome-swiper时swiper会自动安装

1、查看本地是否安装vue-awesome-swiper包

npm ls vue-awesome-swiper  //查询本项目中是否安装此包
npm ls vue-awesome-swiper -g  //查询全局中是否安装此包

//如果本地没有安装，会报empty

npm i vue-awesome-swiper // 如果本地没有安装再安装

2、引入

全局引入

import vueSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'  //引入样式
Vue.use(vueSwiper )

3、使用

<swiper class="swiper-box" :options="swiperOption" ref="swiperOption">
      <swiper-slide v-for="item of imgList" :key="item">
        <div class="img-wrap">
          <img :src="item" alt="" />
        </div>
      </swiper-slide>
      <div class="swiper-button-prev" slot="button-prev" @click="prevBtn"></div>
      <div class="swiper-button-next" slot="button-next" @click="nextBtn"></div>
   </swiper>

<script>
	data(){
		swiperOption:{
			observer: true,
        	observeParents: true,
       	 	speed: 300,
        	autoHeight: true,// 这个参数在某些情况下可以让不同高度的图片都居中显示
        	loop: true,
       		 // autoplay: true,
        	navigation: {
          		nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
          		prevEl: '.swiper-button-prev'
        	},
        on: {}
		}
	}
</script>

5、基本上这样操作下来轮播就可以实现了，但是按照这个来有时也会出错，目前未知的错

二、错误集

1、项目因error in swiper.css 启动失败

刚开始是发现node_modules下swiper文件中没有dist目录，这个原因不明，用npm uninstall swiper也卸载不掉，就直接指定swiper版本重新下载 npm i swiper@4.0.7。但是问题还没解决
报错提示有个loader处理的

看一下webpack中关于css loader的配置

include表示在当前文件src/css文件夹下的带有.css后缀的文件才会进行style-loader css-loader,而我引入的swiper.css并不是这个文件夹下的，所以没有进行css loader转化，直接将其当做文本处理，里面的语法不能识别，将include中注释掉就可以成功启动

2、swiper初始化失效

初始化失效是因为一开始没有引入swiper.css这个文件导致的，不会让项目报错，但是会影响初始化失败

3、左右切换箭头失效

这个原因还没有查出来，但是用其他办法来实现左右切换的效果

//在两个箭头节点上添加点击事件,用swiper上的slidePrev(), slideNext()方法实现点击切换
  <div class="swiper-button-prev" slot="button-prev" @click="prevBtn"></div>
  <div class="swiper-button-next" slot="button-next" @click="nextBtn"></div>

methods:{
	 prevBtn() {
      this.swiper1.slidePrev();
    },
    nextBtn() {
      this.swiper1.slideNext();
    }
}

//这里的this.swiper1是通过computed计算得来的
 computed: {
    swiper1() {
      return this.$refs.swiperOption.swiper;
    }
  },