首页 > 其他分享 >vue eslint 报错 error “Component name “*****“ should always be multi-word”,该怎么办?

vue eslint 报错 error “Component name “*****“ should always be multi-word”,该怎么办?

时间:2023-08-23 17:26:05浏览次数:39  
标签:multi vue word js 报错 组件

出现的问题:

 在 vue-cli 创建的项目中,创建文件并命名后,会报  “Component name "*****" should always be multi-word”  报错;

报错截图示例如下:

Component name "******" should always be multi-word.eslintvue/multi-word-component-names

报错的原因:

 在组件命名的时候未按照 ESLint 的官方代码规范进行命名,根据 ESLint 官方代码风格指南,除了根组件(App.vue)以外,其他自定义组件命名要使用大驼峰命名方式或者用“-”连接单词进行命名;

解决方案: 

方案一 :重命名(亲测有效)

 文件的名称重命名
 重新命名组件名为驼峰命名方式或者用“-”连接单词的格式

这样问题就解决啦~~~~

示例如下:

方案二 :配置 vue.config.js 文件(网上方法,本人使用无效)

在根目录下找到 vue.config.js 文件(如果没有则新建一个,按照示例中的代码进行添加;用 vue-cli 脚手架进行创建的项目都会有 vue.config.js 文件),添加下面的代码在 vue.config.js 文件下,加入以下代码


// 关闭eslint校验
lintOnSave: false 

示例如下: 

此方案只是编译时不报错,如果使用 VScode+eslint 会在文件头标红提示,并且官方并不建议直接关闭校验,因此在这里并不推荐使用该方法进行解决;

配置 vue.config.js 文件的方法(方案二)一般都不能解决问题,不建议大家使用

如果你发现并没有解决问题,那么不妨试试其他方案

方案三 :配置 .eslintrc.js文件(亲测有效)

1、关闭命名规则

找到 .eslintrc.js 文件在 rules 里面加上这么一句

// 关闭名称校验
'vue/multi-word-component-names': "off" 
 建议使用这种方法,更加正确合理;

示例如下:

发现不报错了,可以正常运行啦~~~

 以上是关闭命名规则,将不会校验组件名,官方建议设置是根据组件名进行忽略

2、忽略个别组件名

// 添加组件命名忽略规则
 
    "vue/multi-word-component-names": ["error",{
       "ignores": ["Home","User"]  //在这个数组中加入需要忽略的组件名
    }]
推荐使用方案三,极力推荐!!!

 示例如下:

非常重要的注意点:(重启项目,配置文件才生效)

在运行的项目中,修改配置文件,必须先将项目在  终端  两次点击 Ctrl+C  将项目 终止运行,再 npm run serve 重新运行项目,修改的配置文件才可以生效

这样,就解决这个报错啦~~~❤❤❤

标签:multi,vue,word,js,报错,组件
From: https://www.cnblogs.com/mahmud/p/17652229.html

相关文章

  • Vite + Vue3 + Element-Plus
    搭建Vite项目注意Vite需要 Node.js 版本14.18+,16+。然而,有些模板需要依赖更高的Node版本才能正常运行,当你的包管理器发出警告时,请注意升级你的Node版本。使用NPM: npmcreatevite@latest使用Yarn:yarncreatevite使用PNPM:pnpmcreatevite输入项......
  • unity在使用了HybridCLR进行编译时报错
    unity在使用了HybridCLR执行HybridCLR/Generate/All时,一直不成功,提示pleasefirstuse"HybridCLR/Generate/All"后面还有fatalerror:'icalls/mscorlib/System/MonoType.h'filenotfound#include"icalls/mscorlib/System/MonoType.h"每次执行HybridCLR/Gener......
  • vue3 用vite创建项目
    1.第一步运行创建命令(npm)npmcreatevite@latest注意的地方:首次创建的时候会出现这个 直接y就行了Needtoinstallthefollowingpackages:create-vite@latestOktoproceed?(y)直接y就行了2.第二步创建项目名称?Projectname:»vue3-demo3.第三步找到vue即可(下边有......
  • vue常用正则表达式判断身份证格式
    判断身份证格式 /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/写成一个校验类,以后直接使用functionisIdCard(idCard){letreg=/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|3......
  • 安装vue3+vite报错
    报错:‘D:\Program‘不是内部或外部命令,也不是可运行的程序;我已经配置过环境变量,发现是node安装目录D:\ProgramFiles\nodejs,中间有空格导致,只能改变nodejs位置1.把nodejs整个剪切出来放在d盘根目录下面2.修改node的全局环境npmconfigsetcache"D:\nodejs\node_cache......
  • vue3 和 react18 对比
    Vue3和React18是目前最新的版本,它们都是非常受欢迎的前端框架。下面是对Vue3和React18进行深度对比的一些关键点:组件模型:Vue3:Vue3采用了基于函数的组件模型,即使用setup函数来定义组件逻辑。这种方式更加直观和灵活,允许开发人员以更简洁的方式编写组件。React18:React18仍然......
  • low-ui-vue前置解读|实现一个动态列的表格组件
    最近另一个团队正式在项目中推广内部开发的low-ui组件库了,当然还在内部阶段,但是太慢了。作为架子的设计者和部分功能的开发者,我决定先把常见的功能通过模仿的形式公开出来。避免大家搜索无果或者使用一些框架增加学习成本。所谓动态列的表格,就是列数不固定。像广为使用的elementU......
  • Vue项目原本原本http请求变成了https
    Vue项目http请求变更为https处理方式在index.html中添加如下代码 <metahttp-equiv="Content-Security-Policy"content="upgrade-insecure-requests">如果向去去掉s就注释<metahttp-equiv="Content-Security-Policy"content="upgrade-insecure-requests......
  • vue3 使用 router 进行跳转备忘
    1.在画面中添加子画面,使用el-menu菜单进行跳转,只更新子画面a.首先在配置router路径的js文件中配置画面的路径,子画面的路径要在父画面的children下面 在父节点下设置redirect属性,打开父画面时会默认打开相应子画面,否则子画面默认显示为空白 b.在画面显示区域添加......
  • 直播平台软件开发,vue-全局过滤器时间
    直播平台软件开发,vue-全局过滤器时间步骤一:处理数据 exportconstformatYmd=(date)=>{ lettime=newDate(date)  lety=time.getFullYear() letm=time.getMonth()+1 letd=time.getDate()  return[y,m,d].map((v)=>String(v).padStart(2,'0......