vue中如何写轮播图

步骤：
1. 安装vue-awesome-swiper

npm install vue-awesome-swiper -S 

2.在vue项目中引用vue-awesome-swiper

main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

某一个vue组件文件中：

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  }
}

3 、 .vue文件中的的html

<template>
  <swiper :options="swiperOption" ref="mySwiper">
    
    <swiper-slide>I'm Slide 1swiper-slide>
    <swiper-slide>I'm Slide 2swiper-slide>
    <swiper-slide>I'm Slide 3swiper-slide>
    <swiper-slide>I'm Slide 4swiper-slide>
    <swiper-slide>I'm Slide 5swiper-slide>
    <swiper-slide>I'm Slide 6swiper-slide>
    <swiper-slide>I'm Slide 7swiper-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>
template>

4、.vue文件的script标签中的内容