Vue3中全局使用Swiper6+

Swiper 6+ 配置

---

• 官方文档：https://swiperjs.com/vue/#installation

• 安装

npm i swiper

• 新建 plugins / swiper.ts

import { App } from 'vue'

// swiper 额外组件配置
import SwiperCore, { Pagination } from 'swiper'

// swiper 单独样式 （less / scss）
import 'swiper/swiper.less'
import 'swiper/components/pagination/pagination.less'

// swiper 必备组件
import { Swiper, SwiperSlide } from 'swiper/vue'

// 使用额外组件
SwiperCore.use([Pagination])

// 全局注册 swiper 必备组件
const plugins = [Swiper, SwiperSlide]

const swiper = {
  install: function (app: App<Element>) {
    plugins.forEach(item => {
      app.component(item.name, item)
    })
  }
}

export default swiper

*** 默认直接全局导入 必备组件， 会报错缺少声明文件。**

• 项目根目录新建 swiper-t.d.ts

declare module 'swiper/vue' {
  import _Vue from 'vue'
  export class Swiper extends _Vue {}
  export class SwiperSlide extends _Vue {}
}

• main.ts中导入

import swiper from '@/plugins/swiper'
createApp(App)
	...// 其他配置
  .use(swiper)
  .mount('#app')

• 使用

直接在需要的地方使用即可，按照需求，自定义引入组件，配置组件，详细请看官方文档

<template>
	<swiper :pagination="{ clickable: true }">
		<swiper-slide></swiper-slide>
	</swiper>	
</template>

案例演示(码云)