vue使用swiper轮播

vue-cli搭建的h5项目使用轮播图

• 首先选择的是vue的vue-awesome-swiper
• 安装 npm install vue-awesome-swiper --save
• main.js 中进行引入
• 页面中引入和相关属性的配置

安装成功之后main.js中进行全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'  //**安装之后样式也会同样的安装，只是不同的版本后缀不一样，可以打开包自行查看（有的路径改变了，自行查看）**
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

具体页面中使用

<swiper :options="swiperOption" class="swiper-box">
          <swiper-slide v-for="item in serverDetail.imagesUrl" :key="item.id">
            <img :src="item" class="swiper-img" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>

sctipt中

import "swiper/css/swiper.css"; 这里注意具体看使用的版本是否需要引入样式，以及具体位置。
import { swiper, swiperSlide } from "vue-awesome-swiper";
**这部分我是注释掉了，因为没注释之前一直报错，vue警告，样式也出不来，注释之后就可以了**
 components: {
    // swiper,
    // swiperSlide //不能注入
  },

data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: false,
        autoplay: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        speed: 1000,
      },
      serverDetail: [],
    };
  },

暂时不知道为什么不同版本的下面的代码有的不注释掉是可以用的，我用vue-cli搭建的项目，
“swiper”: “^5.4.1”,
“vue”: “^2.6.11”,
“vue-awesome-swiper”: “^4.1.1”,
相应的版本号
components: {
// swiper,
// swiperSlide //不能注入
},