vue-awesome-swiper插件入门使用

效果：

vue-awesome-swiper官网

一、安装vue-awesome-swiper
npm install vue-awesome-swiper --save

二、引入vue-awesome-swiper

• 全局引入：
  main.js:

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

• 局部引入：
  swiper这种用到的组件不是很多的建议局部引入
  在需要用到swiper的组件里引入，如Home.vue

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";//局部引入

export default {
  components: {
    swiper,
    swiperSlide
  }，
};
</script>

三、使用vue-awesome-swiper
Home.vue

<template>
  <div>
    //vue-awesome-swiper结构
    <swiper :options="swiperOption">
      <swiper-slide class="swiper-slide" v-for="(item,index) in slide" :key="index">
        slide{{item}}
      </swiper-slide>
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper"; //局部引入

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination", //分页器作用对象
          clickable: true //分页器小圆点是否可点击
        }
      },
      slide: [1, 2, 3, 4]
    };
  }
};
</script>

<style>
.swiper-slide {
  height: 400px;
  background: pink;
  font-size: 50px;
  text-align: center;
  line-height: 400px;
}
</style>