最近写vue2.0项目中用到了轮播图的一个插件，也就是vue-awesome-swiper，个人感觉还是比较强大的，swiper官网中的API及配置均可使用(支持3.0)，以下说下使用该插件的一些步骤：

第一步安装

npm install vue-awesome-swiper --save

第二部在main.js中引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'（如果你使用的是2.6.0以上的版本要自己手动去加载css）Vue.use(VueAwesomeSwiper)

然后就可以在组件中使用该插件

• 
  
  <template>
  
  
• 
  
          <div>
  
  
• 
  
                  <swiper :options="swiperOption"  ref="mySwiper">
  
  
• 
  
                          <!-- 这部分放你要渲染的那些内容 -->
  
  
• 
  
                          <swiper-slide v-for="item in items">
  
  
• 
  
                          </swiper-slide>
  
  
• 
  
                          <!-- 这是轮播的小圆点 -->
  
  
• 
  
                          <div class="swiper-pagination" slot="pagination"></div>
  
  
• 
  
                  </swiper>
  
  
• 
  
          </div>
  
  
• 
  
  </template>
  
  
• 
  
  <script>
  
  
• 
  
          import { swiper, swiperSlide } from 'vue-awesome-swiper'
  
  
• 
  
          export default {
  
  
• 
  
                  components: {
  
  
• 
  
                          swiper,
  
  
• 
  
                          swiperSlide
  
  
• 
  
                  },
  
  
• 
  
                  data() {
  
  
• 
  
                          return {
  
  
• 
  
                                  swiperOption: {
  
  
• 
  
                                  //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
  
  
• 
  
                                  notNextTick: true,
  
  
• 
  
                          pagination: '.swiper-pagination',
  
  
• 
  
                          slidesPerView: 'auto',
  
  
• 
  
                          centeredSlides: true,
  
  
• 
  
                          paginationClickable: true,
  
  
• 
  
                          spaceBetween: 30,
  
  
• 
  
                              onSlideChangeEnd: swiper => {
  
  
• 
  
                                      //这个位置放swiper的回调方法
  
  
• 
  
                                      this.page = swiper.realIndex+1;
  
  
• 
  
                                      this.index = swiper.realIndex;
  
  
• 
  
                              }
  
  
• 
  
                          }
  
  
• 
  
                          }
  
  
• 
  
                  },
  
  
• 
  
                  //定义这个sweiper对象
  
  
• 
  
                  computed: {
  
  
• 
  
  
  
  
• 
  
                      swiper() {
  
  
• 
  
                        return this.$refs.mySwiper.swiper;
  
  
• 
  
                      }
  
  
• 
  
                  },
  
  
• 
  
                  mounted () {
  
  
• 
  
                          //这边就可以使用swiper这个对象去使用swiper官网中的那些方法
  
  
• 
  
                      this.swiper.slideTo(0, 0, false);
  
  
• 
  
                  }
  
  
• 
  
  
  
  
• 
  
          }
  
  
• 
  
  </script>
  
  
• 
  
  <style>
  
  
• 
  
  </style>
  
  
• 
  
  
  

奈斯，加油加油