Vue3 + Swiper = 天作之合 ❤️

最新推荐文章于 2025-07-23 09:45:18 发布

原创最新推荐文章于 2025-07-23 09:45:18 发布 · 369 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

🧭 前言

Swiper 是前端轮播图界的扛把子💪，而 Swiper Element 是它的 Web Components 版本，兼容性强、使用简单，特别适合 Vue3 项目中直接上手！

今天我们就来搞定它！🏗️

🛠️ 步骤一：安装 swiper

首先当然是安装依赖啦～打开你的终端，输入👇

npm install swiper
# 或者用 yarn
yarn add swiper

💡 Tip：这里我们用的是 swiper 的 Web Components 版本，不是 vue-awesome-swiper 哦！vue-awesome-swiper已经不再维护啦！

🧱 步骤二：在 main.js 中注册 Swiper Element

Swiper Element 是原生 Web Component，所以要先注册一下，不然 Vue 不认识它 👀

👉 打开你的 main.js 或 main.ts，加入以下代码：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// 引入 swiper 的 element bundle
import 'swiper/element/bundle'

// 注册 swiper 的自定义元素
import { register } from 'swiper/element/bundle'
register() // 💥 必须注册！

createApp(App).mount('#app')

✨ 到这一步，Swiper 的组件就可以在全局用了！

🎨 步骤三：在组件中使用 swiper-container 和 swiper-slide

在你想放轮播图的 Vue 组件中，直接写👇（是不是很像原生标签？就是这么丝滑～）

<!-- App.vue -->
<template>
  <swiper-container
    slides-per-view="1"
    navigation="true"
    pagination="true"
    loop="true"
    style="width: 600px; height: 300px;"
  >
    <swiper-slide>🌟 Slide 1</swiper-slide>
    <swiper-slide>🚀 Slide 2</swiper-slide>
    <swiper-slide>🎉 Slide 3</swiper-slide>
  </swiper-container>
</template>

<script setup>
// 不需要再引入 Swiper 组件了，已经全局注册啦～
</script>

<style scoped>
/* 可选样式：你也可以自定义按钮、分页器等样式 */
</style>

✅ 到这里，轮播图已经跑起来啦！是不是超级简单！

🧩 Bonus：监听事件也很 easy！

Swiper 的事件也能直接监听，像这样👇

<swiper-container
  @slidechange="onSlideChange"
  @swiperprogress="onProgress"
>
  <swiper-slide>😎 Slide A</swiper-slide>
  <swiper-slide>🔥 Slide B</swiper-slide>
</swiper-container>

<script setup>
function onSlideChange(e) {
  console.log('Slide changed!', e.detail)
}

function onProgress(e) {
  console.log('Swiper progress:', e.detail)
}
</script>