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

Question

我正在使用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.js 中使用 swiper.js？希望你能帮助我谢谢:)

Answer 1

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

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

尽管如此，还是可以选择使用Swiper。vue-awesome-swiper为我工作。