VUE如何快速做一個輪播圖

1. 第三方插件

https://github.com/surmon-china/vue-awesome-swiper

npm install swiper vue-awesome-swiper --save

或者yarn add swiper vue-awesome-swiper

2. 全局註冊

註明！   全局配置我寫在了main.js裏面了

3. 局部註冊

我沒用過

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

4. 配置後的操作方法

首先我先新建用過swiper.vue的文件，把component寫進去

然後script裏面data要綁定數據 ，這個swiperoptions是對照上面的

5. 正常使用