关于vue.js:swiper遇到的坑

申明对于 swiper：

1、Swiper 是一款收费以及轻量级的挪动设施触控滑块的 js 框架，应用硬件加速过渡（如果该设施反对的话）。次要应用于挪动端的网站、挪动 web apps，native apps 和 hybrid apps。次要是为 IOS 而设计的，同时，在 Android、WP8 零碎也有着良好的用户体验，Swiper 从 3.0 开始不再全面反对 PC 端 。因而，如需在 PC 上兼容更多的浏览器，能够抉择 Swiper2.x（甚至反对 IE7）。
2、vue-awesome-swiper 是基于 swiper 的 Vue 组件。是 swiper 举荐的在 vue 中应用 swiper 的形式。

装置

咱们在 vue 我的项目装置 swiper 时往往会应用 npm i swiper 命令进行装置，个别装置到的是最新版的 swiper，从而会导致呈现这样的报错：

报错

Module not found: Error: Can't resolve'swiper/dist/css/swiper.css' in ...

Module not found: Error: Can't resolve'swiper/swiper-bundle.css' in ...

这是因为版本变动导致 css 文件门路地位扭转

解决办法：

卸载重新安装旧版本

npm uninstall swiper

npm uninstall vue-awesome-swiper

npm install swiper@4.5.1

npm install vue-awesome-swiper@3.1.3

总结：

倡议一开始就装置 vue-awesome-swiper 3.1.3 版，装置对应的 swiper 版本

而后全副依照 3.1.3 版本的文档来应用即可。