vue-cli使用swiper插件及报错解决

安装

不推荐高版本(有bug),反正能正常使用就行.

cnpm install vue-awesome-swiper swiper@5.4.5 --save

main.js引入

import Vue from "vue"
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

组件使用

 <!-- 轮播图开始 -->
      <div class="swiper">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- 轮播的图片 -->
          <swiper-slide v-for="(item,index) in shopdata.img.split(',')" :key="index"><img :src="item"
              style="width:100%" /></swiper-slide>
          <!-- 小圆点分页器 -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <!-- 轮播图结束 -->

swiper配置项(放data里面)

  swiperOption: {
          loop: true, // 设置图片循环
          autoplay: { //设置自动播放
            autoplay: true, //自动播放开关,默认为false
            delay: 3000 //播放速度(隔3秒播放一次)
          },
          speed: 1000, //滑动的速度
          pagination: {
            el: ".swiper-pagination", //分页器的类名
            clickable: true //设置分页小圆点可手动点击
          }
        }

其他配置项详见官方文档
到这里应该可以正常使用了

遇到过的报错问题

[Vue warn]: Unknown custom element: <swiper> - did you register the
 component correctly? For recursive components, make sure to provide
  the "name" option.

造成原因:

1. 引入顺序不对
   得先引入vue再引入swiper
2. 引入组件时写法错误
   引入组件时应该大写:Swiper,SwiperSlide(vscode在components里写Swiper时正确的话会变色)