vue3 +ts 引入swiper

安装swiper插件

  npm i swiper 

单组件使用
index.vue

<script lang='ts' setup>
import {Swiper, SwiperSlide} from 'swiper/vue';
//用到哪些功能自行添加
import {Navigation, Pagination, Scrollbar, A11y} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

const modules = reactive({
    modules: [
        Navigation, Pagination, Scrollbar, A11y
    ]
})
</script>

<template>
<swiper
						<!-- 自动轮播 -->
                        :autoplay="{
                            delay: 2500,
                            disableOnInteraction: false,
                        }"
                        <!--循环-->
                        :loop="true"
                        <!--引入模块-->
                        :modules="modules.modules"
                        <!--小圆点-->
                        :pagination="{ clickable: true }"
                        <!-- 视图显示几个 -->
                        :slides-per-view="1"
                        <!-- 间距 -->
                        :space-between="50"
                        class="mySwiper"
                        
                        navigation
                        
                >
                    <swiper-slide>Slide 1</swiper-slide>
                    <swiper-slide>Slide 2</swiper-slide>
                    <swiper-slide>Slide 3</swiper-slide>
                </swiper>
                </template>

然后就可以了