在vue项目中下载swiper出现:Do not use ‘new’ for side effects报错问题

news/2024/5/14 16:58:23/文章来源:https://blog.csdn.net/a1598452168YY/article/details/128130184

我报错的情况是:我在单文件组件vue文件中使用new Swiper,报了两个错误,图示:

第一个错误是:‘Swiper’ is not defined

第二个错误是:Do not use ‘new’ for side effects

解决办法:

(1)第一个错误是因为没有导入Swiper的js文件;

  • 在单文件组件开发中,引入swiper已经不能再用script标签来引入了,
  • 新引入的方式为:在终端输入:
npm i --save swiper

如果出现很多npm ERR!错误,就输入下面的命令:

npm i --save swiper --legacy-peer-deps
  • 下载完查看package.json文件有没有swiper版本号,有的话就下载成功了 

为什么会出现上述错误:

  • 是因为npm版本过高的原因,高于7之后要求会更严格;
  • npm -V可以查看npm的版本

--legacy-peer-deps 标志  是在v7中引入的,目的是绕过peerDependency自动安装;它告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装。

(2)第二个错误是:不能把new放在一边使用,

方法一:解决的办法其实就是可以把new Swiper赋值给一个变量,然后使用这个变量就可以了,像下面这样:

方法二:但有时候我们并不需要这个变量来接收,就只想按照new Swiper来写,那就按照下面这种方式解决:

  •  找到项目下的 .eslintrc.js 这个文件,找到代码里面的 rules ,在里面加上下面这个代码:
'no-new': 'off'

  • 按照上面的步骤就可以解决,还没解决的话再重新运行一下项目,重启服务器; 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_228840.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5G无线技术基础自学系列 | MU-MIMO原理

素材来源:《5G无线网络规划与优化》 一边学习一边整理内容,并与大家分享,侵权即删,谢谢支持! 附上汇总贴:5G无线技术基础自学系列 | 汇总_COCOgsta的博客-CSDN博客 MU-MIMO是指多个用户在上下行数据传输时…

【Linux】命令

常用命令 帮助&#xff08;Manual Pages&#xff0c;Manual&#xff1a;手册&#xff0c;特指参考文件&#xff09; man man <command_name> 打开目录&#xff08;change directory&#xff09; cd /etc/ cd /home 查看当前所在目录 pwd 创建一个名为 file 的文件&…

[附源码]计算机毕业设计JAVA校园共享单车系统

[附源码]计算机毕业设计JAVA校园共享单车系统 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybati…

二、【React拓展】懒加载 lazy

文章目录1、适用点2、汇总1、适用点 懒加载往往配合路由一起使用&#xff0c;此处修改的项目是 二、【React-Router5】路由的基本使用 中的项目 首先从react中引入lazy import { lazy } from react 修改引入路由组件的写法 // import About from ./pages/About // import Home…

SequoiaDB湖仓一体分布式数据库2022.11月刊

本月看点速览 产品能力再获认可&#xff0c;入围多个榜单、报告 ‍精彩亮相2022沙丘大会湖仓一体专场 实力吸睛&#xff0c;获多家权威媒体关注与报道 生态圈不断扩大&#xff0c;与6家合作伙伴完成互认证 青杉计划2023进行中&#xff0c;一起攀登更高的“杉” 产品能力再获…

pip 安装 livetest 失败

pip 安装 livetest 失败1. 现象2. 解决方案(1) 下载(2) 移动并解压(3) 修改文件1) livetest-0.5/livetest/__init__.py2) livetest-0.5/setup.py3) livetest-0.5/test/test_select.py(4) 运行安装4. 验证1. 现象 pip 安装 livetest 失败 2. 解决方案 (1) 下载 官网下载 liv…

09-13-Hbase-shell入门操作

09-Hbase-shell入门操作&#xff1a; HBase Shell 操作 DDL基本操作 1&#xff0e;进入 HBase 客户端命令行 [roothadoop102 hbase-1.3.1]# bin/hbase shell 2&#xff0e;查看帮助命令 hbase(main):001:0> help 3&#xff0e;查看当前数据库中有哪些表 hbase(main):0…

网页添加灰色滤镜

网页添加灰色滤镜 b站的灰色滤镜 我校的灰色滤镜 CSDN的灰色滤镜 自己调制css主题,给网页加上滤镜. 更快捷的,可以在可以调制css的浏览器插件中加上滤镜,只要开启插件就会自动修改网站滤镜 以darkreader为例打开其开发者工具 *INVERT .jfk-bubble.gtx-bubble .captcheck_a…

ABAP CLEAR REFRESH FREE 说明(刘欣)

本文仔细测试总结了ABAP中的clear、refresh、free&#xff0c;因为很多时候程序的BUG就是出现在变量没有清理干净&#xff0c;希望整理一个定式出来以后少出BUG。 用clear、refresh、free对带表头的表执行的测试结果如下表&#xff1a; 看起来&#xff0c;最好的避免这些清空命…

总结:SpringBoot内嵌Tomcat原理

一、介绍 一般我们启动web服务都需要单独的去安装tomcat&#xff0c;而Springboot自身却直接整合了Tomcat&#xff0c;什么原理呢&#xff1f; 二、原理 SpringBoot应用只需要引入spring-boot-starter-web中这个依赖&#xff0c;应用程序就默认引入了tomcat依赖&#xff0c;其…

C语言——malloc开辟矩阵

目录 用动态内存开辟矩阵 矩阵初始化 用动态内存开辟矩阵 动态内存更多的知识在这篇博客&#xff0c;本文将介绍用malloc开辟矩阵。 malloc是C语言中用来动态开辟内存的&#xff0c;通过malloc函数可以向计算机申请一串连续的内存空间。 因为malloc开辟的内存在堆上&#…

Observability:从零开始创建 Java 微服务并监控它 (二)

这篇文章是继上一篇文章 “Observability&#xff1a;从零开始创建 Java 微服务并监控它 &#xff08;一&#xff09;” 的续篇。在上一篇文章中&#xff0c;我们讲述了如何创建一个 Java web 应用&#xff0c;并使用 Filebeat 来收集应用所生成的日志。在今天的文章中&#xf…

uni-app 超详细教程(三)(从菜鸟到大佬)

本文中内容为&#xff1a; 1. 支付功能&#xff08;微信支付&#xff0c;支付宝支付&#xff09; 2. 项目打包&#xff1a;&#xff08;APP打包&#xff0c;H5打包&#xff0c;微信小程序打包&#xff09; 一&#xff0c;uni - app 的支付功能 一、微信支付 1、登录微信开…

华为云数据库GaussDB(for Cassandra)揭秘:高性能低成本是什么样的体验?

在我们的日常理念中&#xff0c;追求性价比是最为常见的&#xff0c;但是你知道购买低配置还能享受高性能、低延时、超低价的数据库有哪些吗&#xff1f;今天我们就用数据说话&#xff0c;带你深入了解GaussDB(for Cassandra)挑战高性价比&#xff01; 众所周知&#xff0c;有…

操作系统实验5:信号量的实现与应用

写在最前的总结 下面的实验内容是在完整做完实验时候补充的&#xff0c;这里先把踩过的坑记录一下。 调试总结 先在Ubuntu上模拟生产者—消费者问题。这个实验分为两大部分&#xff0c;一个是实现信号量&#xff0c;另一个是验证信号量。对于第二个&#xff0c;建议先在Ubun…

【MySQL基础】MySQL常用的图形化管理工具有那些?

目录 一、为什么要使用MySQL图形化管理工具 原因 / 目的 / 作用 二、什么是DOS窗口? 三、常见的MySQL图形化管理工具有那些&#xff1f; 四、 常见几个MySQL图形工具的介绍 Navicat SQLyog MySQL Workbench DataGrip 五、Navicat图形工具的安装与使用 第一步&#x…

学习响应式布局

针对性内容 页面设计在不同设备的显示情况布局只会使用float定位&#xff0c;而不会掌握flex不能很好的使用rem作为设计单位掌握响应式布局、弹性等常见布局 学习内容 css中媒体查询的作用和使用方法flex弹性盒子的用法rem的作用和使用方法目录 针对性内容 学习内容 Media…

[iOS]App Store Connect添加银行卡时的CNAPS代码查询

App Store Connect 协议、税务和银行业务中&#xff0c;给付费APP类型添加银行卡需要填写CNAPS代码CNAPS代码&#xff0c;其实就是联行号。 联行号又称大额行号、银联号、银行行号或CNAPS号。 银行联行号查询

Java+JSP+MySQL基于SSM的会议交接平台的设计与实现-计算机毕业设计

项目介绍 随着社会竞争压力的不断加强&#xff0c;企事业单位内部的会议都在不断的增加&#xff0c;有效的会议可以提高企事业内部的沟通&#xff0c;更好的做出符合战略目标的决策&#xff0c;但是传统的会议交接有一定的问题存在&#xff0c;首先就是必须面对面进行传达&…

matlab图像的增强

1.灰度变换增强 &#xff08;1&#xff09;图像直方图 &#xff08;2&#xff09;图像直方图的均衡化 2.频域滤波增强 &#xff08;1&#xff09;低通滤波器 &#xff08;2&#xff09;高通滤波器 &#xff08;3&#xff09;同态滤波器 3.彩色增强 &#xff08;1&#xff09;真…