1.在命令列裡面輸入

npm install [email protected] --save

2.在main.js檔案裡面寫入一下程式碼

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3.在元件中應用vue-awesome-swiper外掛

3.1.template標籤內的內容

  <div class
 
="swiper_wrap">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item in swiperarr" :key="item.id">
        <img class="img_tab" :src="item.url" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div
 
>
    </swiper>
  </div>

3.2.script標籤內容

export default {
  name:'HomeSwiper',
  data () {
    return {
      swiperOptions: {
        // 分頁器設定
        pagination: '.swiper-pagination',
        // 環狀輪播
        loop: true
      },
      swiperarr:[
        {url:'https://imgs.qunarzz.com/vs_ceph_vcimg/79faa5a73731e84a7731db49d5baa91e.jpeg',id:'0'},
        {url:
 
'https://imgs.qunarzz.com/vs_ceph_vcimg/c0a60fa20379efa4f02ce527a680dc1b.jpeg',id:'1'},

      ]
    };
  }
}

3.3.css部分程式碼

<style lang='stylus' scoped>
.swiper_wrap >>> .swiper-pagination-bullet-active
  background: #fff

.swiper_wrap
  width: 100%
  height: 32.5vw
  .img_tab
    width: 100%
</style>