Vue3中使用vue-awesome-swiper

一、先确认依赖版本（Vue3 要求）

确保安装的是适配 Vue3 的版本（vue-awesome-swiper v5+ 才支持 Vue3）：

bash

运行

# 卸载旧版本（如果有的话）
npm uninstall vue-awesome-swiper

# 安装 Vue3 适配版（swiper@8+ + vue-awesome-swiper@5+）
npm install swiper@8 vue-awesome-swiper@5 --save

二、Vue3 全局注册（推荐，全项目通用）

修改 main.js（Vue3 入口文件），这是 Vue3 最简洁的全局注册方式：

javascript

运行

// main.js (Vue3 专属写法)
import { createApp } from 'vue'
import App from './App.vue'

// 1. 导入 Swiper 核心模块（按需导入）
import { Pagination, Autoplay, Navigation } from 'swiper'
// 2. 导入 VueAwesomeSwiper 插件
import VueAwesomeSwiper from 'vue-awesome-swiper'

// 3. 导入 Swiper 样式（核心样式 + 模块样式）
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/autoplay'
import 'swiper/css/navigation'

// 4. 创建 App 并全局注册
const app = createApp(App)
app.use(VueAwesomeSwiper) // 全局注册 Swiper 组件
app.mount('#app')

三、Vue3 组件使用（<script setup> 语法）

这是 Vue3 最推荐的写法，无需手动注册组件，代码极简：

vue

<template>
    <div class="swiper-box" style="width: 100%; height: 400px; margin: 0 auto;">
        <!-- Swiper 组件：直接使用，无需任何导入 -->
        <swiper :modules="[Pagination, Autoplay, Navigation]" :pagination="{ clickable: true }"
            :autoplay="{ delay: 3000, disableOnInteraction: false }" :navigation="true" :loop="true" :speed="600"
            @slide-change="onSlideChange">
            <!-- 轮播图1 -->
            <swiper-slide>
                <img src="@/assets/首页轮播素材/swiperimg1.jpg" alt="轮播图1"
                    style="width: 100%; height: 100%; object-fit: cover;">
            </swiper-slide>
            <!-- 轮播图2 -->
            <swiper-slide>
                <img src="@/assets/首页轮播素材/swiperimg2.jpg" alt="轮播图2"
                    style="width: 100%; height: 100%; object-fit: cover;">
            </swiper-slide>
            <!-- 轮播图3 -->
            <swiper-slide>
                <img src="@/assets/首页轮播素材/swiperimg3.jpg" alt="轮播图3"
                    style="width: 100%; height: 100%; object-fit: cover;">
            </swiper-slide>
            <swiper-slide>
                <img src="@/assets/首页轮播素材/swiperimg4.jpg" alt="轮播图3"
                    style="width: 100%; height: 100%; object-fit: cover;">
            </swiper-slide>
        </swiper>
        <!-- 这里可以写 HTML 注释，说明各个属性作用 -->
        <!-- :modules: 声明使用的模块 -->
        <!-- :pagination: 分页器可点击 -->
        <!-- :autoplay: 自动播放配置 -->
        <!-- :navigation: 上/下一页按钮 -->
        <!-- :loop: 无限循环 -->
        <!-- :speed: 切换速度 -->
        <!-- @slide-change: 监听切换事件 -->
    </div>
</template>

<script setup>
import { Pagination, Autoplay, Navigation } from 'swiper'

// 监听轮播切换事件
const onSlideChange = (swiper) => {
    console.log('当前轮播索引：', swiper.activeIndex)
}
</script>

<style scoped>
/* 样式穿透：修改 Swiper 内置样式 */
:deep(.swiper-pagination-bullet-active) {
    background-color: #ffffff !important;
}

:deep(.swiper-button-prev),
:deep(.swiper-button-next) {
    color: #ffffff;
}
</style>

四、在页面中使用 MySwiper 组件

vue

<!-- src/views/Home.vue (Vue3 写法) -->
<template>
  <div class="home-page">
    <h1>Vue3 Swiper 示例</h1>
    <MySwiper /> <!-- 直接使用，无需注册 -->
  </div>
</template>

<script setup>
// Vue3 <script setup> 中，导入即注册
import MySwiper from '@/components/MySwiper.vue'
</script>

核心差异（Vue2 vs Vue3）

表格

特性	Vue2 写法	Vue3 <script setup> 写法
组件注册	需手动写 components: {}	导入即注册，无需手动配置
响应式数据	data() { return {} }	ref() / reactive()
全局注册插件	Vue.use()	app.use()
样式穿透	/deep/ 或 ::v-deep	:deep()（Vue3 推荐）

总结

1. Vue3 下使用 vue-awesome-swiper 需安装 v5+ 版本，搭配 Swiper v8+。
2. 全局注册只需在 main.js 中配置一次，所有组件直接使用 <swiper> 标签。
3. <script setup> 是 Vue3 核心语法，无需手动注册组件，代码更简洁。
4. 样式修改需用 :deep() 穿透 scoped 作用域，才能修改 Swiper 内置样式。