1：安装 cnpm install vue-awesome-swiper@3 --save-dev cnpm install swiper@3 2：在main.js中

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3：在需要使用的页面中

<template>
  <div id="video-list">
    <swiper :options="swiperOption">
        <!-- 幻灯内容 -->
        <swiper-slide>slide1</swiper-slide>    
        <swiper-slide>slide2</swiper-slide> 
        <swiper-slide>slide1</swiper-slide>    
        <swiper-slide>slide2</swiper-slide> 
    </swiper>
  </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'    //导入组件
    export default{
        name:'videoList',
        components: {
            swiper, //定义组件
            swiperSlide
        },
        data(){
            return {
                swiperOption: {
                    direction:"vertical",
                    grabCursor: true, 
                    setWrapperSize: true, 
                    autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
                    slidesPerView: 1,
                    mousewheel: true, 
                    mousewheelControl: true, 
                    height: window.innerHeight, // 高度设置，占满设备高度
                    resistanceRatio: 0, 
                    observeParents: true, 
                }
            }
        },
     }
</script>
<style scoped>
    #video-list{height: 100%;}
    #video-list .swiper-container{
        height: 100%;
    }
</style>