Vue项目中集成Swiper轮播图的完整步骤与代码实现

作者：南栀时间：2026-10-25 11:50:53浏览：319

本文详细讲解在Vue项目中集成Swiper轮播图的完整流程。从使用vue-cli创建基础项目开始，逐步演示如何安装swiper及vue-awesome-swiper依赖，并通过封装独立的swiperCom组件和在主页面HomeView中引入，实现图片轮播效果。文中提供了关键代码片段及配置注意事项，帮助开发者快速掌握Vue与Swiper的结合用法。

前言

网络上关于如何在Vue中集成Swiper的教程繁多，但质量参差不齐，许多内容存在复制粘贴且未经验证的情况。为了提供清晰可靠的指引，本文将假设读者为初学者，从项目初始化开始，逐步演示具体操作步骤。

第一步：创建Vue项目

vue create 项目名

执行创建命令后，使用键盘上下键选择最下方的选项，然后按回车键确认。

在配置选项中，请勾选Babel、Router、Vuex以及Css-Processors这四个插件，其他选项保持不选中状态（通过空格键进行选中或取消选中）。

后续的配置步骤可参考相关截图指引，完成选择后项目即可成功创建。

第二步：安装Swiper相关依赖包

首先，在命令行终端中切换到新建的项目目录。

cd 项目名

npm i swiper vue-awesome-swiper

npm i swiper@5

安装完成后，检查package.json文件以确认依赖包是否已成功添加。

第三步：配置并使用Swiper

1. 在components文件夹下新建一个名为swiperCom.vue的文件，将提供的代码复制并粘贴至该文件中。代码注释中详细说明了Swiper的具体使用方法。

请注意：确保在../assets/img/目录下存在swiper1.jpg等所需的图片资源，否则轮播图可能无法正常显示。

<template>
    <div id="swipercom">
        <div class="swiper-container" id="swiperIndex">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
                    <img :src="item.pic" alt="">
                </div>
            </div>
            //换页器
            <div class="swiper-pagination">

            </div>
            //前进后退
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            //滚动条
            <div class="swiper-scrollbar"></div>
        </div>
    </div>
</template>

<script>
    import 'swiper/css/swiper.css'  //引入swiper样式
    import Swiper from 'swiper';	//引入swiper
    export default {
        name: "Swiper",
        data(){
            return{
                imgs:[
                    {pic:require('../assets/img/swiper1.jpg')},
                    {pic:require('../assets/img/swiper2.jpg')},
                    {pic:require('../assets/img/swiper3.png')}
                ]
            }
        },
        mounted() {
            var mySwiper=new Swiper('#swiperIndex',{
                //配置分页器内容

                loop: true, // 循环模式选项
                pagination:{
                    el:".swiper-pagination",//换页器与哪个标签关联
                    clickable:true//分页器是否可以点击
                },
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                //如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })
        }
    }
</script>

<style lang="less">
    #swipercom{
        width: 7.5rem;
        #swiperIndex.swiper-container{
            width: 7.1rem;
            height: 2.6rem;
            border-radius: 0.1rem;

            .swiper-slide img{
                width: 100%;
            }
            .swiper-pagination-bullet-active{
                background-color: orangered;
            }
        }
    }
</style>

2. 在项目中找到HomeView.vue文件（默认为主页），将提供的代码复制并替换原有内容。该代码引入了swiperCom子组件，即我们需要使用的Swiper封装组件。

<template>
  <div class="home">
<!--    轮播图-->
    <swiperCom></swiperCom>
  </div>
</template>

<script>
import SwiperCom from "@/components/swiperCom";
export default {
  name: 'HomeView',
  components: {
 	SwiperCom
  }
}
</script>

<style scoped>
</style>

完成上述步骤后，轮播图效果即可生效，具体表现可参考运行结果截图。