vue轮播图插件：vue-awesome-swiper

先用vue-cli新建一个项目
npm install vue-awesome-swiper --save(-S)
等待安装，安装完后package.json中添加上了vue-awesome-swiper

"dependencies": {
    "vue": "^2.5.2",
    "vue-awesome-swiper": "^3.1.3"
}

进入main.js

import Vue from 'vue'
import App from './App'
import vueSwiper from 'vue-awesome-swiper'  //引入vue-awesome-swiper
import 'swiper/dist/css/swiper.css'  //引入样式

Vue.config.productionTip = false

Vue.use(vueSwiper)  //使用插件

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: ''
})

swiper的基本结构

参考swiper的基本结构，在App.vue中尝试一下

成功实现了轮播图的效果，接下来配置一些属性，在App.vue中进行更改

这样就实现了轮播图更多属性的配置