vue3+vite 使用swiper6

最新推荐文章于 2024-05-21 09:48:42 发布

weixin_43927930

最新推荐文章于 2024-05-21 09:48:42 发布

阅读量2k

点赞数 2

分类专栏： swiper 文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43927930/article/details/118554357

版权

本文介绍了如何在Vue3和Vite项目中集成Swiper6来创建轮播图。首先通过yarn安装项目依赖，接着安装swiper并全局引入。在components文件夹下创建swiper.js，并编写组件代码。然后在main.js中引入swiper组件，并在具体页面中使用，展示轮播图效果。最后展示了包含左右箭头的最终显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先创建项目( 这儿使用的是yarn 使用npm也可以 )

yarn create @vitejs/app my-vue-app --template vue
cd my-vue-app 
yarn
yarn dev

安装完成以后的样子在这里插入图片描述

然后安装swiper

yarn add swiper

下载完swiper要引入 ( 此处是全局引入 )
在components下创建一个swiper.js
在这里插入图片描述

swiper.js里面的代码

import { createApp } from 'vue'
const app = createApp()
import { Swiper, SwiperSlide } from 'swiper/vue'

//根据需要加载所需模块( 这儿只需要左右箭头 就没导入其他模块 )
import SwiperCore, { Navigation } from 'swiper'
import 'swiper/swiper-bundle.css'
SwiperCore.use([Navigation])
const plugins = [Swipe