vue3.0 setup语法糖使用swiper8插件

国内网站vue3.0使用swiper8vue版本的插件教程比较少，正好这两天玩vue3的时候用到了，记录一下 首先下载swiper swiper英文版有非setup语法糖的用法

cnpm i swiper -S

然后在需要的页面进行引入

<template>
    <swiper
    :modules="modules"
    :pagination="{ clickable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
    >
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
    </swiper>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import {Pagination,A11y } from 'swiper';
// 对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/scss';
import 'swiper/scss/pagination';
const onSwiper = (swiper) => {
    console.log(swiper);
};
const onSlideChange = (e) => { // swiper切换的时候执行的方法
    console.log('slide change',e.activeIndex);
};
// setup语法糖只需要这样创建一个变量就可以正常使用分页器和对应功能，如果没有这个数组则无法使用对应功能
const modules = [ Pagination, A11y];
</script>

以上就是swiper8在setup语法糖的基本使用，有问题的欢迎大家指出