1.首先通過npm安裝vue-awesome-swiper，我在項目中用的是2.6.7版本

npm install [email protected] –save

2. 在main.js中引入

import VueAwesomeSwiper from ‘vue-awesome-swiper‘

import ‘swiper/dist/css/swiper.css‘

Vue.use(VueAwesomeSwiper)

3.實現輪播圖

1. <template>
2. <div class="wrapper">
3. <swiper :options="swiperOption
   " v-if="showSwiper" ref="mySwiper" >
4. <!-- slides -->
5. <swiper-slide v-for="item of list" :key="item.id">
6. <img class="swiper-img" :src="item.imgUrl"/>
7. </swiper-slide>
8. <div class="swiper-pagination" slot="pagination"></div>
9. </swiper>
10. </div>
11. </template>
13. <script>
14. export default {
15. name:"HomeSwiper",
16. props:{
17. list:Array
18. },
19. data (){
20. return{
21. swiperOption:{
22. pagination:".swiper-pagination",
23. autoplay: 2000,
24. loop:true
    ,
25. paginationClickable: true,
26. observer:true,
27. observeParents:true
28. }
30. }
31. } ,
32. computed: {
33. showSwiper () {
34. return this.list.length
35. }
36. }
37. }
39. </script>
41. <style lang="stylus" scoped>
42. .wrapper >>> .swiper-pagination-bullet-active
43. background:#fff
44. .wrapper
45. overflow:hidden
46. width:100%
47. height 0
48. padding-bottom:31.25%
49. background:#eee
50. .swiper-img
51. width:100%
52. </style>

vue-awesome-swiper實現輪播圖