时间戳

首页 > 解决方案 > 我如何在 vue js 中使用 swiper.js

javascript - 我如何在 vue js 中使用 swiper.js

问题描述

我正在使用yarn add swiper 安装 swiper.js

这是我的代码，但它没有显示任何幻灯片或其他东西

<swiper
   :slides-per-view="3"
   :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
>
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
 </swiper>

错误是这样说的

[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Swiper>
       <DetailProduct>
         <App> at src/App.vue
           <Root>

这是我对 package.json 的依赖

"dependencies": {
    "bootstrap": "^4.5.3",
    "bootstrap-vue": "^2.18.1",
    "core-js": "^3.7.0",
    "node-sass": "^4.14.1",
    "numeral": "^2.0.6",
    "sass-loader": "^10.0.5",
    "swiper": "^6.3.5",
    "vue": "^2.6.11",
    "vue-router": "^3.4.9",
    "vue-toast-notification": "^0.5.4",
    "vuex": "^3.4.0"
  }

我如何在 vue 中使用 swiper.js。希望你能帮助我谢谢:)

标签： javascriptvue.jsswiperswiper.js

解决方案

Swiper网站上的 Vue 模块说“ Swiper Vue.js 组件仅与新的 Vue.js 版本 3 兼容”。参考

你package.json显示你的 Vue 版本是 2.6.11

尽管如此，仍有使用Swiper的选项。vue-awesome-swiper为我工作。

推荐阅读