vue-awesome-swiper 的安裝和使用

安裝：最好用：cnpm install vue-awesome-swiper --save。用npm太慢會卡死。

引用：

 

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

 

 

  /*組件方式引用*/
    import 'swiper/dist/css/swiper.css'////這里注意具體看使用的版本是否需要引入樣式，以及具體位置。
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
    components: {
      swiper,
      swiperSlide
    }

 

 

 

 <swiper :options="swiperOption">
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.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: {
        notNextTick: true,
        autoplay: true,
        speed: 1000,
        loop: true
      },
    };
  },
 components: {   //
    swiper,
    swiperSlide
  },

 

 

 

---

 

我個人自己使用的方法：

0.1、使用的是yarn 的方式安裝插件：

 

 

0.2、在需要使用的組件中引入

 

 

0.3、結構設置，

 

 

 

 

 0.4、配置項設置1

 

 

0.5、配置項設置2