Vue安装swiper插件中的坑

已于 2022-03-31 08:44:17 修改
阅读量3.4k 收藏 4
点赞数 1
分类专栏： vue.js es6 文章标签： 前端 javascript
于 2022-03-31 08:37:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34297387/article/details/123862281
版权
vue.js 同时被 2 个专栏收录
46 篇文章 3 订阅
订阅专栏
es6
15 篇文章 0 订阅
订阅专栏

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 --save

在这里插入图片描述

在这里插入图片描述

解决问题。

时间的情敌
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Swiper在vue中的引用
zhangli0421的博客
05-20 1520
1.在vue中使用 首先 npm install --save swiper@5 // 安装低版本的最好，这里装5.x 2.安装结束后，直接复制下面代码。哪里需要放哪里，组件直接用就好了 <template> <div id="swipercom"> <div class="swiper-container" id="swiperIndex"> <div class="swiper-wrapper"> <.
swiper注意事项 安装引入 版本 报错 添加点击事件
weixin_50885665的博客
01-17 940
1. 禁止Source Map提示，删除swiper.min.js文件的最后一行//# sourceMappingURL=swiper.min.js.map即可。由于我自己在写一个demo时候用到了该插件，出现了一些问题，所以就简单查了一下该插件的用法以及一些常见的错误。---跟版本号有关系，4.0 版本首字母大写，3.0版本，首字母小写。里面有该文件swiper.min.js.map，请放在相应的位置。下载文件包并在页面中加载Swiper的JS和CSS文件，或使用。加载文件，加载后再初始化Swiper。
Vue系列——vue2封装swiper轮播组件
最新发布
2401_84620143的博客
06-15 873
npm轮播图是一个列表，所以这里使用到了v-for来遍历，轮播的部分是swiper-slide元素。我把图片路径绑定到了style属性上面。根据swiper的官方教程，我们需要实例化swiper。1、导入swiper；2、导入swiper的css；3、通过获取图片数据listImg；4、mounted类似react中的componentDidMount方法，实例化swiper必须等到dom渲染完成才能操作。
执行 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 后提示无法安装 问题出
swiper安装一直失败
m0_71803050的博客
09-08 1623
1
解决：Cannot resolve vue-awesome-swiper/dist/ssr
weixin_48033662的博客
02-02 3130
解决：Can't resolve 'vue-awesome-swiper/dist/ssr一·问题描述：（1）做《谷粒学苑》整合前端页面时，执行“npm run dev”命令时报异常（2）初始配置如下图：（3）在“node_modules/vue-awesome-swiper/dist/”目录下，根本就没有ssr.js文件。二·问题原因：（1）直接原因：安装vue-awesome-swiper时执行的npm命令是：“npm install vue-awesome-swiper”这个命令是默认安装最新版的。结
vue中使用swiper报错问题及解决方法
qq_42628504的博客
10-15 2598
最近开发中遇到了使用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
分享vue里swiper的一些坑
10-18
1. **安装**：通过npm命令`npm i swiper`来安装Swiper插件，注意Vue项目可能还需要引入相应的CSS文件，因此还需要`import 'swiper/dist/css/swiper.min.css';`。 2. **引入**：在当前Vue组件中，引入Swiper模块`...
vue引入swiper插件的使用实例
08-29
在Vue项目中引入Swiper插件，可以实现丰富的滑动效果，如轮播图、幻灯片等。以下是一个详细的步骤指南，教你如何在Vue应用中集成并使用Swiper插件。 **步骤一：安装Vue** 首先确保已安装Node.js环境，然后通过npm...
vue引入新版 vue-awesome-swiper插件填坑问题
08-28
在本文中，我们将详细介绍 Vue 引入新版 Vue-Awesome-Swiper 插件填坑问题的解决方案。Vue-Awesome-Swiper 是一个基于 Swiper 的 Vue 组件库，它提供了许多有用的功能，如滑块、分页、自动播放等。本文将解决以下三...
Vue安装使用swiper报错
飞翔的小白
11-11 2524
最近 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后提示无法安装 问...
vue3项目脚手架如何使用swiper， ‘vue-awesome-swiper‘报错解决（简单示例）
qq_52799985的博客
12-03 1588
Vue3和Vue2在使用swiper时是有差别的，Vue3引入swiper需要注意Vu3的版本和swiper的版本，如果不匹配通常会报错
报错：关于Vue项目下载swiper插件时没有dist文件夹的问题
虎康的博客
04-24 1886
最近在学习Vue时，下载swiper插件遇到了一个问题： 我在本地node_modules下面的swiper里，并没有找到dist文件夹，导致我不知道从哪导入swiper的css样式文件 后来，我在csdn的问答论坛上找到了答案，原因是下载的swiper版本不对，新版的swiper插件中是没有dist文件夹的，引入swiper.css的地址被替换成了swiper/swiper-bundle.css, 请参考Swiper官网链接 在这里插入图片描述 附上文中提到的问答链接 原文：https://blog.
vue安装使用swiper
maoge_666的博客
11-17 589
vue安装使用swiper
Vue使用swiper遇到的一个小坑
weixin_39407291的博客
08-08 276
1.已经执行过 npm intall 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.i
引入swiper样式报错npm install --save swiper/dist/css/swiper.css
qq_42928070的博客
09-09 3633
查看swiper版本，高于6.0.0需import 'swiper/swiper-bundle.css'方式引入样式； 低于6.0.0 import 'swiper/css/swiper.css'引入样式
Vue中使用swiper插件的方法
weixin_44996454的博客
10-07 755
1：安装 npm install --save swiper@3 (要指定版本) 2：创建一个用轮播的组件：例如SwiperImage.vue 3: main.js文件中 引入以下文件 import 'swiper/dist/css/swiper.min.css' import 'swiper/dist/js/swiper.min.js' 3: 组件中模板的代码如下 <template> <div class="swiper-image"> <div c
使用swiper插件的报错以及解决 -4058
Harley567
11-14 447
使用swiper插件的报错以及解决 -4058 解决方法:降低插件版本
swiper插件报错 vue_vue项目swiper插件的使用
weixin_28726391的博客
01-13 510
step1.安装插件cnpm install vue-awesome-swiper --savestep2.在当前页面引用插件// 引入swiper的css样式require('swiper/dist/css/swiper.css');import Vue from "vue";import VueAwesomeSwiper from 'vue-awesome-swiper';Vue.use(V...
vue-awesome-swiper插件移除
09-02
要移除vue-awesome-swiper插件，您可以按照以下步骤进行操作： 1. 打开您的Vue项目的终端或命令行界面。 2. 使用npm或yarn等包管理工具进入您的项目目录。 3. 在命令行中运行以下命令来移除vue-awesome-swiper插件的依赖： ``` npm uninstall vue-awesome-swiper ``` 或者， ``` yarn remove vue-awesome-swiper ``` 这将从您的项目中移除vue-awesome-swiper插件及其相关依赖。 4. 在您的Vue组件或页面中，找到使用vue-awesome-swiper插件的地方，并将其相关代码删除或注释掉。 5. 接下来，您可以删除不再使用的vue-awesome-swiper插件的任何文件或文件夹。 请确保在移除插件之前备份您的代码，以防意外情况发生。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时间的情敌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值