先用vue-cli新建一個(gè)項(xiàng)目
npm install vue-awesome-swiper --save(-S)
等待安裝萨惑，安裝完后package.json中添加上了vue-awesome-swiper

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

進(jìn)入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: '<App/>'
})

swiper的基本結(jié)構(gòu)

 <swiper>
        <swiper-slide class="swiper-slide"></swiper-slide>
 </swiper>

參考swiper的基本結(jié)構(gòu)，在App.vue中嘗試一下

<template>
  <div id="app">
    <div>
      <swiper>
        <swiper-slide class="swiper-slide" v-for="(item,index) in slide" :key="index">
          我是第{{item}}個(gè)輪播圖
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      slide: [1, 2, 3, 4, 5]
    }
  }
}
</script>

<style>
.swiper-slide {
  width: 100%;
  height: 500px;
  line-height:500px;
  font-size: 50px;
  text-align: center;
  background-color: rosybrown;
}
</style>

<template>
  <div id="app">
    <div>
      <swiper :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for="(item,index) in slide" :key="index">
          我是第{{item}}個(gè)輪播圖
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>   <!-- 分頁 -->
        <div class="swiper-button-prev" slot="button-prev"></div>  <!-- 箭頭左 --> 
        <div class="swiper-button-next" slot="button-next"></div>  <!-- 箭頭右 -->
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      slide: [1, 2, 3, 4, 5],
      //設(shè)置屬性
      swiperOption: {
        //顯示分頁
        pagination: {
          el: '.swiper-pagination',
          clickable: true //允許分頁點(diǎn)擊跳轉(zhuǎn)
        },
        //設(shè)置點(diǎn)擊箭頭
        navigation: {
          nextEl: '.swiper-button-next', 
          prevEl: '.swiper-button-prev'
        },
        //自動(dòng)輪播
        autoplay: {
          delay: 400
        },
        //開啟循環(huán)模式
        loop: true,
        //開啟鼠標(biāo)滾輪控制Swiper切換
        mousewheel: true
      }
    }
  }
}
</script>

<style>
.swiper-slide {
  width: 100%;
  height: 500px;
  line-height: 500px;
  font-size: 50px;
  text-align: center;
  background-color: rosybrown;
}
</style>

這樣就實(shí)現(xiàn)了輪播圖更多屬性的配置