vue-awesome-swiper 插件安装与使用

最新推荐文章于 2025-02-18 15:28:48 发布

「已注销」

最新推荐文章于 2025-02-18 15:28:48 发布

阅读量1k

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_36276469/article/details/89382281

版权

本文介绍了如何在Vue项目中安装和使用vue-awesome-swiper插件。首先通过npm安装该插件，接着在main.js文件中导入swiper的CSS样式，并注册VueAwesomeSwiper组件，最后可以直接在组件中应用。

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

一首先讲下安装：
通过npm安装: npm install vue-awesome-swiper --save

二在vue项目中找到main.js添加：
import ‘swiper/dist/css/swiper.css’ //这里注意具体看使用的版本是否需要引入样式，以及具体位置。
//（如果使用的是2.6.0以上的版本需要自己手动去加载css）
import VueAwesomeSwiper from ‘vue-awesome-swiper’
Vue.use(VueAwesomeSwiper)

然后就直接贴代码负责上去就可以使用了

<template>
  <div class="scroll">
    <swiper :options="swiperOption">
      <swiper-slide>1</swiper-slide>
      <swiper-slide>2</swiper-slide>
      <swiper-slide>3</swiper-slide>
      <swiper-slide>4</swiper-