说说在vue中如何引用swiper
1.npm命令安装swiper
npm install swiper --save-dev
2.在需要用到swiper插件的组件中引入swiper
js中 import Swiper from "swiper"
css中 @import "swiper/dist/css/swiper.css";
3.初始化swiper
export default { name: ‘HelloWorld‘, data () { return { msg: ‘Welcome to Your Vue.js App‘ } }, mounted(){ var mySwiper = new Swiper (‘.swiper-container‘, { loop: true, // 如果需要分页器 pagination: ‘.swiper-pagination‘, // 如果需要前进后退按钮 nextButton: ‘.swiper-button-next‘, prevButton: ‘.swiper-button-prev‘, }) } }
这是因为我们在引用swiper.css的路径可能与现有的路径不一致造成的，可以在node_modules文件下找到swiper文件夹，然后新建一个dist文件加上丢失的文件
1，从根本上看这个问题 应该是swiper版本号的问题，npm的版本没有锁定，造成安装错误。
解决方法把npm的版本也锁定一下
2，或者用 yarn来安装依赖，它的版本锁定不容易出问题。
参考：https://www.jianshu.com/p/df6e0fda6d8e
原文：https://www.cnblogs.com/yizhilin/p/12993188.html