vue swiper的安装使用

最新推荐文章于 2025-07-03 11:42:32 发布

小健最帅

最新推荐文章于 2025-07-03 11:42:32 发布

阅读量6.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_41936352/article/details/84780310

vue.js 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用Vue-Awesome-Swiper组件库，包括从GitHub上获取资源、通过npm进行安装、在Vue项目中全局及局部引用Swiper组件的方法。提供了在main.js文件中引入和配置VueAwesomeSwiper的代码示例。

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

githut:https://github.com/surmon-china/vue-awesome-swiper

swiper中文网：https://www.swiper.com.cn/

1 npm 安装

在指定的目录下

npm install vue-awesome-swiper --save

2引用

全局；在main.js中

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

局部引用

// require styles
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}