Vue3 Swiper/Vue-Awesome-Swiper 不工作

Question

我正在尝试在我的项目中使用一些刷卡器（其中任何一个，因为它有效，没有偏好），但我就是无法让它工作。我尝试过的所有版本（5、7、8、9、11、Swiper Element）都会向我抛出有关 main.js 上导入语句的错误，例如：

'未找到此依赖项：

• ./node_modules/vue-awesome-swiper/index.js 中的 swiper/vue

要安装它，您可以运行：npm install --save swiper/vue [webpack.进度] 100%'

我使用纱线作为我的包管理器，这可能是一个问题吗？ 似乎这个版本都不起作用，有人可以给我一些帮助来解决这个问题吗？也许我错过了一些东西。

提前致谢！

Answer 1

根据此页：

Swiper Vue 组件可能会在未来版本中被删除。建议迁移到 Swiper Element。

我尝试了Swiper Element示例并且它有效：

别忘了先

npm uninstall vue-awesome-swiper

npm install swiper

main.js(ts)

import { register } from 'swiper/element/bundle';
register();

应用程序.vue

<swiper-container>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper-container>

这是我的构建日志：

vite v5.2.9 building for production...
✓ 46 modules transformed.
dist/index.html                  0.36 kB │ gzip:  0.26 kB
dist/assets/index-DWYNT8DU.js  232.99 kB │ gzip: 71.69 kB
✓ built in 993ms