swiper添加

安装：

npm install swiper vue-awesome-swiper --save
npm install animate.css

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */ )

node环境配置：

demo.vue

<template>
  <div class="show-pic-all">
    <swiper :options="swiperOption" @swiper="onSwiper" @slideChange="onSlideChange">
      <swiper-slide>
        <div class="show-pic-box">
          <p class="show-pic">
            <img src="../assets/01.png" />
          </p>
          <p class="how-text">设置Slide的切换效果，默认为"slide"</p>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="show-pic-box">
          <p class="show-pic">
            <img src="../assets/02.png" />
          </p>
          <p class="how-text">设置Slide的切换效果，默认为"slide"</p>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="show-pic-box">
          <p class="show-pic">
            <img src="../assets/03.png" />
          </p>
          <p class="how-text">设置Slide的切换效果，默认为"slide"</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        slidesPerView: 1,
        // 设置分页器
        pagination: {
          el: '.swiper-pagination',
          // 设置点击可切换
          clickable: false,
        },
        // 设置轮播可循环
        loop: true,
        effect: 'coverflow',
        cardsEffect: {
          slideShadows: true,
          //transformEl:'.text',
        },
      },
    };
  },
  methods: {
    onSwiper() {},
    onSlideChange() {},
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
p {
  margin: 0;
  padding: 0;
}
html,
body {
  background: #efefef;
}
.show-pic-all {
  width: 100%;
  padding: 60px 30px 0;
  box-sizing: border-box;
  /* background: url("../assets/bg.png") no-repeat;
  background-size: 100% 100%; */
}
.show-pic-box {
  width: 100%;
  background: #fff;
}
.show-pic {
  width: 100%;
  height: 390px;
  border-radius: 6px;
  overflow: hidden;
}
.show-pic img {
  width: 100%;
}
.how-text {
  padding: 27px 0;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

import animated from "animate.css"

Vue.use(VueAwesomeSwiper)
Vue.use(animated)

new Vue({
  render: h => h(App),
}).$mount('#app')