vue中使用轮播图 vue-awesome-swiper

1. 首先安装 npm install vue-awesome-swiper --save  若是提示网络错误可能被和谐了，可以使用npm镜像。若已经是可以省略第2步

2. 设置为国内镜像 npm configset registry https://registry.npm.taobao.org --global

3.   在main.js中引入

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

全局注册

Vue.use(VueAwesomeSwiper)

4. 在vue页面中使用

<template>

<div class="swiper-container swiper-container-horizontal"> 
        <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide v-for="v in this.banner"><router-link to="v.bm_href"><img :src="v.bm_img" alt=""></router-link></swiper-slide>
        </swiper>
        <div class="swiper-pagination"></div>
      </div>

</template>

<script type="text/ecmascript-6">

import { getAdvertisementList } from '../assets/js/api'   //引入接口文件
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data() {
    return {
      banner:[], //用来存放从接口获取的banner数据
      swiperOption: {
        autoplay: 3000, //开启自动播放
        pagination: '.swiper-pagination', //开启圆点分页
        paginationClickable: true,
      } 
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  created() {
    //获取banner
    getAdvertisementList(data).then((res) => {
      if (res.code == 0) {
        for(let i in res.data){
          this.banner.push(res.data[i]);
        }
      }
    }).catch((err) => {
      console.log(err)
    }) 
}
</script>