vue安装最新版swiper插件(避坑) --------日期：2021-12-24

最新推荐文章于 2024-09-11 11:13:45 发布

提分小肥

最新推荐文章于 2024-09-11 11:13:45 发布

阅读量1.1k

点赞数 1

分类专栏： npm 文章标签： vue.js npm javascript

本文链接：https://blog.csdn.net/weixin_51194402/article/details/122119241

版权

npm 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

作者今天弄了一天的swiper这个插件的安装，一开始按照下面的图片进行npm安装，安装之后vue.packgage.js里面为最新版的swiper，可作者在操作时，发现一直在报错。

皇天不负有心人，被我发现原来只要安装如下版本即可

npm i swiper@6.7.5 --save

报错随之柔韧而解

希望对读者们有所帮助

--来自 tongge_1(作者网名)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

提分小肥

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 安装指定版本swiper_关于swiper升级6.0后 vue接入swiper的坑

weixin_30748139的博客

01-11

4908

最近项目重构新建了个项目，发现swiper出了点问题，在某度上搜索出来的帖子基本没啥用，还是自己折腾首先说下使用软件版本"vue": "^2.6.11","swiper": "^5.4.5","vue-awesome-swiper": "^4.1.1",坑1以前只需要安装vue-awesome-swiper就够了现在需要weiper一起安装才行坑2按官网教程操作后vue会报错找不到swiper....

vue中swiper vue-awesome-swiper的使用方法和爬坑大法

m0_67391377的博客

03-06

1531

文章目录由版本引起的一系列坑正确的使用姿势：安装（指定版本）组件中使用总结：由版本引起的一系列坑时间：2020.07.08（时间，版本很重要-坑的起源）这两天在vue中使用swiper做轮播图，就随手百度了一下，找个帖子开始参考（坑开始了）按照图中的方法，原计划5分钟搞定，一顿操作猛如虎，然后vue各种报错，然后再各种百度，结果开始了2天的爬坑之旅坑1 按照上图安装方法，npm将安装最新的vue-awesome-swiper（@4），对应的是swiper6，但是国内暂时没有

参与评论您还未登录，请先登录后发表或查看评论

vue安装使用swiper

maoge_666的博客

11-17

615

vue安装使用swiper

【JavaScript】插件与Swiper插件详解

最新发布

lph159的博客

09-11

1289

在JavaScript中，插件是指一个独立的代码模块，用于扩展或增强某个基础库或框架的功能。插件可以是一个库、函数或对象，允许开发者在原有功能上添加额外的特性，而无需修改基础代码。例如，JQuery等库允许通过插件机制扩展其功能，而不用重写库本身。Swiper是一款非常流行的轮播（slider）插件，用于创建移动端和桌面端兼容的轮播组件。它不仅可以创建简单的轮播，还支持滑动效果、缩放效果、缩略图导航等丰富的功能。Swiper 通过纯 JavaScript 实现，并且无任何依赖库，非常轻量化且性能优越。

vue 安装指定版本swiper_Vue中的runtime-only和runtime-compiler

weixin_35682132的博客

12-30

1189

在我们使用vue-cli的时候，会提示你安装的版本可以看到有两种版本：Routime Only和Runtime+ Compiler版本1.Runtime Only - 代码中不可以有任何template 性能更高在该版本下，通常需要借助如webpack的vue-loader发工具把.vue文件编译成js因为是在编译阶段做的，所以它只包含运行时的Vue.js代码，因此代码体积也会更轻量。在将.vu...

vue3- swiper组件

2401_85124851的博客

06-17

260

/一开始用的是版本6，由于版本太高了有些功能缺配置没有办法使用。//我这里用的是这两个版本，并不兼容所以要自己配置。Swiper7的默认容器是。，Swiper6之前是。

vue swiper的安装使用

weixin_41936352的博客

12-03

6935

githut:https://github.com/surmon-china/vue-awesome-swiper swiper中文网：https://www.swiper.com.cn/ 1 npm 安装在指定的目录下 npm install vue-awesome-swiper --save 2引用全局；在main.js中 import Vue from 'vue' im...

1.vue3.0+swiper7轮播图片插件填坑记录

yangyangdt的博客

01-11

2127

针对vue3+swiper7轮播插件的踩坑做一个记录，文中含已运行成功代码和注释。

swiper最新版swiper9无缝匀速轮播-纯html实现

03-31

Swiper 是一款强大的移动触摸滑动插件，广泛应用于网页中的轮播图、产品展示等场景。最新的 Swiper 9 版本进一步提升了性能和用户体验，尤其在纯 HTML 实现时，可以实现无缝匀速轮播的效果。这篇文章将详细介绍如何...

Vue2.x 中使用vue-awesome-swiper实现自定义轮播图效果(+vue-property-decorator+typescript)

Tinkerbaby的博客

12-28

1704

官方资源： swiper：开源免费强大的滑动触摸插件在Vue中使用swiper: 只适用于Vue3.x vue-awesome-swiper ：为vue服务的swiper组件项目vue版本：^2.6.11 目标效果效果参考网址：https://www.zyfra.com/ 1.安装依赖注意这里是同时安装了swiper和veu-awesome-swiper的最新版本： npm install swiper vue-awesome-swiper --save 如果你需要安装指定版本的需要加上你

Vue3 + Ts + Pinia + uni-app 学习笔记

qq_33365152的博客

09-13

609

Vue3 +Ts + Pinia + uni-app 学习笔记

swiper-5.2.0.zip

11-23

资源包含内容：swiper5.2.0压缩包，animate压缩包，animate-twice插件，animateControl插件，适用与网页与H5轮播效果，轮播动画全方位支持，H5宣传页必备利器。

vue3中swiper的使用

work_fei的专栏

06-30

3120

vue3中swiper的使用,注意版本的问题

Vue框架里使用Swiper - 安装篇

草巾冒小子的博客

05-31

900

Vue框架里使用Swiper npm安装swiper cnpm install swiper Vue框架里使用Swiper 如何在Vue项目中优雅的使用swiper插件

swiper安装与引用

kkkkljk的博客

02-29

6444

**# swiper介绍** Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC...

Vue3使用Swiper8.x

lemon_宁萌

09-07

732

vue3.x中使用swiper8.x版本，笔记记录常用属性，以及方法等笔记，方便下次查看。 2.在所需文件中引入swiper组件 3.引入所需样式文件 4.完整JS： 5.完整template： 6.样式可自定义-改用到样式

如何正确的使用最新版本的vue-awesome-swiper？

任磊

01-10

488

最近要做一个走马灯形式的效果，是多个卡片式的效果。于是，想到了 vue-awesome-swiper这个插件。这是插件是基于swiper的。首先，安装插件 npm install swiper vue-awesome-swiper --save # or yarn add swiper vue-awesome-swiper 全局引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // im

Vue使用swiper遇到的一个小坑

weixin_39407291的博客

08-08

293

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

npm install vue-awesome-swiper --save安装失败

06-06

当使用 `npm install vue-awesome-swiper --save` 安装 Vue-Awesome-Swiper（一个用于 Vue.js 的轮播插件）时，如果安装失败，可能是由于以下几个原因： 1. **网络问题**：你的网络连接不稳定或速度过慢，导致下载包不完整或超时。 2. **依赖冲突**：当前项目中可能已经有其他依赖包与 Vue-Awesome-Swiper 存在冲突，需要检查 `package.json` 文件和已安装的依赖是否兼容。 3. **权限问题**：确保你有足够的权限在项目目录下安装新包，或者尝试以管理员身份运行 `npm` 命令。 4. **npm版本**：过旧的 npm 版本可能会导致某些问题，尝试更新到最新版本。 5. **npm仓库问题**：有时候第三方包可能暂时从仓库中移除或遇到维护问题，等待一段时间后重试可能解决。