Swiper轮播图在Vue框架中的运用

要在Vue中运用Swiper需要下载Swiper插件
在命令行cmd（可以cd 根目录）输入

npm install vue-awesome-swiper --save

下载成功后，查看package.json中是否存在

在mian.js中全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper'
// 同时必须引入css样式文件
import 'swiper/css/swiper.css'

// 挂载到vue全局上

或在需要使用的界面引入

  require('swiper/css/swiper.css');
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
    components: {
      swiper,
      swiperSlide
    },

引入后便可以使用了
下面是我根据Swiper中文网中提供的教程做的Swiper轮播图 github地址
Html部分：

Script部分：

<script>
  require('swiper/css/swiper.css');
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
  export default {
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {
          pagination: '.swiper-pagination1',
          slidesPerView: 1,
          spaceBetween: 30,
          centeredSlides: false,
          spaceBetween: 0,
          onSlideChangeEnd: swiper => {
            //这个位置放swiper的回调方法
            this.page = swiper.realIndex+1;
            this.index = swiper.realIndex;
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          //自动播放
          autoplay:{
            delay:5000,
            disableOnInteraction:false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          //循环
          loop:true
        }
      }
    },
    //定义swiper对象
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    mounted () {
      this.swiper.slideTo(0, 0, false);
    }
 
  }
</script>

自己另外加的Style：

效果图：

为了还原与华为商城轮播图的相似度，更改了swiper.css中小圆点及左右按钮的属性。