Vue中怎样使用swiper组件？

我用的VS Code编译器，首先打开终端，进入项目（我是在13-vue文件夹下面的elem中使用）

D:\study\web\13-vue\elem> cnpm install vue-awesome-swiper --save

然后在main.js中引用并使用

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

新建一个swiper组件，里面内容如下

<template>
  <div class="swiper">
    <swiper :options="swiperOption" class="swiper-menu">
      <!-- slides 列表项 -->
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <!-- Optional controls 控制器 -->
      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'WaimaiSwiper',
  data () {
    return {
      swiperOption: {
        loop: true// 是否循环轮播
      }
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>

在父组件中使用该swiper组件

<template>
  <div>
    <waimai-swiper></waimai-swiper>
  </div>
</template>

<script>
import WaimaiSwiper from './components/swiper'
export default {
  name: 'Waimai',
  data () {
    return {

    }
  },
  components: {
    WaimaiSwiper
  }
}
</script>

效果如图所示

                               

 

若需要其他样式的swiper组件，详情参考Swiper中国