1.安装swiper组件

npm install vue-awesome-swiper --save

2.main.js里 引入组件，css(自己写样式的话 则不用引)

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

3.在组件里引入

import { swiper, swiperSlide } from 'vue-awesome-swiper'

4.配置项

export default {
  data(){
    return {
      newsList:[
        {
          title:"武汉市xxx餐饮集团有限公司",
          pubDate:"2019-08-08"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-08-07"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-08-05"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-08-03"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-08-02"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-08-01"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-07-02"
        },
        {
          title:"上海市xxx餐饮集团有限公司",
          pubDate:"2019-06-01"
        }
      ],
     swiperOption: {                     //swiper无缝滚动配置项
        notNextTick: true,
        direction:'vertical',
        speed:1500,//滚动速度
        setWrapperSize: true,
        freeMode:true,//true则是自由模式，不会自动贴合滑动位置
        autoplay:{
          delay:1,
          autoplayDisableOnInteraction:false
        },
        loop:true,//循环
      　 observer:true,//修改swiper自己或子元素时，自动初始化swiper 
　　     observeParents:true,//修改swiper的父元素时，自动初始化swiper  
        spaceBetween:4,//slide之间的距离（单位px）
        slidesPerView:6 //slide可见数量
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}

HTML：

<div class="slide-box">
   <swiper :options="swiperOption">
     <swiper-slide v-for="(slide, index) in newsList" :key="index">
       <span>{{slide.title}}</span>
       <em>{{slide.pubDate}}</em>
     </swiper-slide>
   </swiper>
</div>

修改css

需要把scoped设置给去掉不然，会导致 transition-timing-function:linear；设置不生效
<style lang="less">
.swiper-wrapper{
  transition-timing-function:linear!important;
}
</style>