Vue3上调用swiper6

一、先本地安装插件

    npm install vue-awesome-swiper --save
    npm install swiper --save

二、在main.js全局导入

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

Vue.use(VueAwesomeSwiper)

三、直接在使用的地方用组件，代码直接可以跑（注释的地方就是：核心是分别导出的各个子组件，使用的时候就想注释里面一样的方式添加）

<template>
  <div class="swiper-base">
    <swiper :options="swiperOptions">
      <swiper-slide>
        <img src="https://gw.alicdn.com/imgextra/i3/O1CN01AciPC91XGs4aqUxQw_!!6000000002897-2-tps-1125-352.png_790x10000.jpg_.webp" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
// import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/core'
// SwiperClass.use([Pagination, Mousewheel, Autoplay])

export default {
  name: 'HeaderSwiper',
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  }
}
</script>
<style lang='css' scoped>

</style>