Vue使用swiper遇到的一个小坑

最新推荐文章于 2022-11-14 16:34:16 发布
最新推荐文章于 2022-11-14 16:34:16 发布
阅读量263 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39407291/article/details/107879355
版权

1.已经执行过 npm install swiper --save 但是在npm run dev 的时候仍然报错
2.报错信息如下：提示我们swiper没有安装在这里插入图片描述
.
3. 然后进行疯狂的install 发现并没有用，最后查阅了网上的资料，发现是swiper版本问题
4.找到package.json 和 yarn.lock ，我发现自己的问题是package.json 里面swiper的版本是6.0.0
yarn.lock的版本是4.1.3，把package.json的版本改成yarn.lock里一样
5.install 一下，再启动，问题解决。

感谢原博主的分享：https://www.cnblogs.com/yizhilin/p/12993188.html

weixin_39407291
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用swiper实现中间大两边小的轮播图效果
10-15
主要介绍了vue使用swiper实现中间大两边小的轮播图效果，本文分步骤通过实例代码讲解的非常详细,需要的朋友可以参考下
执行 npm install --save swiper/css/swiper.css 失败解决方案
热门推荐
qwe122343的博客
07-29 1万+
最近 Vue 项目中用到的触摸滑动插件 Swiper，执行 npm install swiper vue-awesome-swiper --save 安装 Swiper 后，在 main.js 中进行引入， import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/css/swiper.css' 运行项目出现 ERROR： 执行 npm install --save swiper/css/swiper.css 后提示无法安装 问题出
vue中使用swiper报错问题及解决方法
qq_42628504的博客
10-15 2515
最近开发中遇到了使用swiper组件时候一直报错问题，后来发现是版本导致的问题 1.下载这两个版本插件： “swiper”: “^4.5.1”, “vue-awesome-swiper”: “^4.0.4”, npm install vue-awesome-swiper@4。0.4 --save -dev npm install swiper@4 --save -dev 2.在xxxx.vue的组件中引入 <script> import { swiper, swiperSlide } fro
swiper安装一直失败
m0_71803050的博客
09-08 1526
1
Vue安装swiper插件中的坑
On the way
03-31 3296
1、在vue中安装swiper插件运行时会报错，错误如下 npm install --save swiper 于是在网上进行查找了一番，竟然是版本问题，因为版本不同 项目目录变了 点开node安装文件夹里也只能看到’swiper/swiper-bundle.css’ 如果用swiper-bundle.css会有很多问题，比如我遇到的就是分页器不生效 这里就需要降低swiper版本了 这里使用的是5.4.5 cnpm install vue-awesome-swiper swiper@5.4.5 --sa
Vue安装使用swiper报错
飞翔的小白
11-11 2454
最近 Vue 项目中用到的触摸滑动插件 Swiper，执行npm install swiper vue-awesome-swiper --save安装 Swiper 后，在 main.js 中进行引入， import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/css/swiper.css' 运行项目出现 ERROR： 执行npm install --save swiper/css/swiper.css后提示无法安装 问...
vue项目引用swiper轮播图插件及报错解决
Hannah_Hannah_的博客
04-28 6010
1、下载插件（不建议下载最新的版本，因为vue2对最新的是wiper版本有不兼容） npm i swiper@6.8.1 --save 下载完成后会在package.json文件中出现： 2、进行基本配置 2.1在main.js中 import swiper from 'swiper' import 'swiper/swiper-bundle.css' Vue.config.productionTip = false new Vue({ router, store,.
使用vue脚手架安装swiper插件报错无法解析依赖
qq_70046407的博客
07-01 579
搜过之后才发现原来是nodejs版本过高不兼容需要降低版本，可以去到nodejs找到以前的版本Node.js下载后缀为msi的文件然后安装nodejs
使用swiper插件的报错以及解决 -4058
Harley567
11-14 407
使用swiper插件的报错以及解决 -4058 解决方法:降低插件版本
vue项目中npm install安装失败，万能解决方法
一火的专栏
12-23 4438
vue项目中npm install安装失败，万能解决方法，即更换淘宝镜像，再执行npm install。 具体如下: npm config set registry https://registry.npm.taobao.org 配置后可通过下面方式来验证是否成功 npm config get registry 在 ~/.npmrc 加入下面内容，可以避免安装 node-sass 失败 sass_binary_site=https://npm.taobao.org/mirrors/node-sas
swiper完整包，包含Swiper4的全部基础演示和未压缩的js、css文件
11-20
swiper完整包，包含Swiper4的全部基础演示和未压缩的js、css文件
vue使用swiper实现左右滑动切换图片
01-18
本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码，供大家参考，具体内容如下 使用npm 安装vue-awesome-swiper npm install vue-awesome-swiper --save 在main.js中引用 import VueAwesomeSwiper...
vue使用swiper.js重叠轮播组建样式
12-30
本文实例为大家分享了vue使用swiper.js重叠轮播组建样式，供大家参考，具体内容如下 <swiper class=swiper options=swiperOption> <swiper class=swiper-slide> 一起来观看 Wes Anderson的色彩回旋舞...
vue2.0使用swiper组件实现轮播效果
12-29
轻松实现vue2.0轮播效果，供大家参考，具体内容如下 1、安装swiper npm install swiper@3.4.1 --save-dev 2、引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3、html页面代码...
vue项目安装 / 卸载 依赖包
文龙刚的博客
06-22 2483
vue项目安装 / 卸载 依赖包
Vue使用swiper插件踩过的坑
weixin_52063946的博客
09-07 2218
这是我在做高仿小米商城项目中遇到的bug，刚开始直接在vue ui中的依赖中直接下载的vue-awesome-swiper，会直接给我下载最新的版本，报错，于是就去 swiper 官方文档按照步骤下载，结果安装之后也是一路报错啊，卸了好几次 node_moduls，经多次查找方法，最终总结如下： 1、不能按照官方文档里安装npm i swiper ，采用这个方法安装的会是最新的版本，导致安装失败 解决方法：安装vue-awesome-swiper@3.1.3 成功 2、引入 swip...
vue使用swiper(swiper6)中遇到的坑
linan996的博客
06-21 7607
使用的swiper版本 swiper组件在html中使用，只需直接引用先关的js文件以及css文件即可，但在vue中使用却截然不同。 声明： 博主先用的swiper的版本（6.7.0） import Swiper from "swiper" 导入swiper 坑一：css导包错误 在使用过程中，如果使用低版本的方式在mounted中挂载，即可触发隐藏彩蛋，发现无法出现上一个和下一个的按钮，如图所示 引入的css样式包为 @import url("…/…/…/…/node_modules/swipe
Vue使用swiper
weixin_43871703的博客
12-13 330
这里是老衲自己写的，在我这测试是没有 任何毛病的，错了什么的勿喷。 Vue使用Swiper 这里先要在小黑板里下载即 npm i swiper， 下载完城后node_modules文件夹下会生成一个swiper文件夹，就是下载成功了。 然后在使用的页面引用， import Swiper from ‘swiper’; import ‘swiper/dist/css/swiper.min.css’...
vue部署生产环境时swiper报错及其解决办法
LEVsunshine的博客
11-28 1307
Cannot assign to read only property ‘exports’ of object '#'问题 在vue中使用swiper，最常考虑的就是直接下载插件 npm install swiper --save 毕竟省心又简单。 然鹅，近期开发的项目，有用到swiper，测试环境一切正常，生产环境部署时开始报错： 由于生产环境浏览器版本比较低，不兼容es6语法，直接使用插件...
vue 使用swiper写一个可滚动的横向导航
最新发布
05-31
好的，你可以按照以下步骤来使用Vue和Swiper写一个可滚动的横向导航： 1. 安装Swiper和Vue-Swiper ``` npm install swiper vue-awesome-swiper --save ``` 2. 在Vue中导入Swiper ``` import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) ``` 3. 使用Swiper创建轮播组件 ``` <template> <div class="swiper-container" ref="mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item, index) in navList" :key="index" @click="handleClick(index)" :class="{active: currentIndex === index}">{{item}}</div> </div> </div> </template> <script> import Swiper from 'swiper' export default { data() { return { currentIndex: 0, navList: ['导航1', '导航2', '导航3', '导航4', '导航5', '导航6', '导航7', '导航8', '导航9', '导航10', '导航11', '导航12'] } }, mounted() { const swiper = new Swiper(this.$refs.mySwiper, { slidesPerView: 'auto', spaceBetween: 30, freeMode: true }) }, methods: { handleClick(index) { this.currentIndex = index } } } </script> <style> .swiper-container { padding: 20px 0; } .swiper-slide { display: flex; justify-content: center; align-items: center; border-radius: 20px; padding: 10px 20px; cursor: pointer; transition: all .3s; color: #333; &.active { background-color: #f60; color: #fff; } } </style> ``` 这样就可以创建一个可滚动的横向导航了，使用Swiper的`slidesPerView`属性设置每个导航按钮占据的宽度，使用`spaceBetween`属性设置导航按钮之间的距离，使用`freeMode`属性开启自由模式，让导航按钮可以自由滚动。在点击导航按钮的时候通过`handleClick`方法来改变当前选中的导航，从而改变样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值