vue-awesome-swiper的使用

1.下载

npm install vue-awesome-swiper --save 这种下载方式是最新版

npm install vue-awesome-swiper@3.1.3 --save 建议使用安装指定版本

2.引入及配置

引入有2种方式，一种是全局引入，第二种是按需引入（局部引入）方式。下来来说下怎么使用：

1）全局引入

在main.js引入：

    /*全局引入*/
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式，以及具体位置。
    Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件中使用，就是一般组件的用法

    <swiper :options="swiperOption">
      <swiper-slide>1</swiper-slide>
      <swiper-slide>2</swiper-slide>
      <swiper-slide>3</swiper-slide>
      <swiper-slide>4</swiper-slide>
      <swiper-slide>5</swiper-slide>
      <swiper-slide>6</swiper-slide>
 <!--也可以换成图片-->
      <swiper-slide><img src="static/images/1.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/2.jpg"></swiper-slide>
    </swiper>
    <!--以下看需要添加-->
    <div class="swiper-scrollbar"></div> //滚动条
    <div class="swiper-button-next"></div> //下一项
    <div class="swiper-button-prev"></div> //上一项
    <div class="swiper-pagination"></div> //标页码

  data(){
    return{
      swiperOption: {//swiper3
      autoplay: 3000,
      speed: 1000,
      }
    }
  }

2）按需引入[局部引入方式

单个组件引入，这种方式是性能比较好点。

      /*组件方式引用*/
    import 'swiper/dist/css/swiper.css'这里注意具体看使用的版本是否需要引入样式，以及具体位置。
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
    components: {
      swiper,
      swiperSlide
    }
<script>
import "swiper/dist/css/swiper.css"; //这里注意具体看使用的版本是否需要引入样式，以及具体位置。
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "About",
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      //swiper3
      swiperOption: {
        autoplay: 3000,
        speed: 1000,
      },
    };
  },
};
</script>