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

原文由 Dicki Maulana Yusuf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您是否在组件中导入了 swiper？

 // Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    ...
}

原文由 markcc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

原文由 Rijo 发布，翻译遵循 CC BY-SA 4.0 许可协议