vue.js swiper最简单的例子跑不同

Question

swiper的最简单例子跑不通，所有slide都堆在一起了，这个问题困扰我很久了，查网上发现并没有少写什么啊，求明眼人提示一下，多谢。

效果图：

代码：
<template>
  <div class="lasted-books">
    <div class="content">
      <div class="lasted-list">
        <div class="list-title">
          <p class="title-text">最新上架</p>
        </div>
        <swiper :options="swiperOptionIn" class="swiper-position">
          <swiper-slide>Slide 1</swiper-slide>
          <swiper-slide>Slide 2</swiper-slide>
          <swiper-slide>Slide 3</swiper-slide>
          <swiper-slide>Slide 4</swiper-slide>
          <swiper-slide>Slide 5</swiper-slide>
          <swiper-slide>Slide 6</swiper-slide>
          <swiper-slide>Slide 7</swiper-slide>
          <swiper-slide>Slide 8</swiper-slide>
          <swiper-slide>Slide 9</swiper-slide>
          <swiper-slide>Slide 10</swiper-slide>
          <div class="swiper-pagination-white swiper-pagination-position" slot="pagination"></div>
      </swiper>
    </div>
  </div></div></template><script type="text/ecmascript-6">
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import { mapGetters } from 'vuex'
  export default {    components: {
      swiper,
      swiperSlide
    },
    data () {      return {        swiperOptionIn: {          centeredSlides:true,          pagination: '.swiper-pagination-white',          paginationClickable: true,          slidesPerView:'auto',          grabCursor : true,
        }
      }
    },    computed: {
      ...mapGetters({        bookList: 'books'
      })
    }
  }</script><style scoped lang="less" rel="stylesheet/less">
  .lasted-books {
    margin-top: 50px;
    .content {
      .lasted-list {
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px #DDD;
        .list-title {
          height: 50px;
          text-align: center;
          line-height: 50px;
        }

        .swiper-position {
          position: relative;
          cursor: pointer;
          .swiper-slide {
            width:100%;
            display: flex;
            text-align:center;
            font-size:28px;
            justify-content:center;
            align-items:center;
            background:#F2F2F2;
          }
        }
        .swiper-pagination-position {
          position: absolute;
          z-index: 1;
          display: flex;
          flex-direction: row;
          justify-content: center;
        }

      }
    }
  }

Answer 1

最近install下来的这个vue-awesome-swiper好像没有css了 我跑之前的项目样式还能加上去 重新install样式就加不上了