在vue-cli项目中如何使用swiper

npm install swiper --save-dev

import Swiper from "swiper";
@import 'swiper/dist/css/swiper.css';

<template>
    <div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
        </div>
    </div>
</template>

<script>
    import Swiper from "swiper";
    export default{
        name:"swiper",
        mounted(){
            var mySwiper = new Swiper ('.swiper-container', {
            })        
        }
    }
</script>

<style>
    @import 'swiper/dist/css/swiper.css';
    .swiper-container {
        width: 600px;
        height: 300px;
    }  
</style>

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 如果引入版本 (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// 如果引入版本 (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper"; //轮播插件
import "swiper/swiper-bundle.css";
components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },

<div class="swiper-container" v-swiper:mySwiper="swiperOption">
         <div class="swiper-wrapper">
                <div class="swiper-slide">
                //单个选项卡内容
                 </div>
         </div>
 </div>

export default{
  data(){
   swiperOption: {
        slidesPerView: 4,//配置每列显示几个选项卡，如果为4，代表100%宽度下会显示4张选项卡，第五个选项需要滑动才能看到
        // ...其他配置项参考swiper中文网
      },
  }
}