首页IT科技es浏览器是什么软件(在 vue eslint 报错 error “Component name “*****“ should always be multi-word”,该怎么办?)

es浏览器是什么软件(在 vue eslint 报错 error “Component name “*****“ should always be multi-word”,该怎么办?)

时间2025-05-05 08:51:44分类IT科技浏览4809
导读:目录...

目录

出现的问题:

报错的原因:

解决方案: 

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

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

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

1            、关闭命名规则

2                 、忽略个别组件名

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

出现的问题:

 在 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 重新运行项目            ,修改的配置文件才可以生效

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

如果有问题                 ,欢迎大家评论区讨论                  ,文章对你有用,给正在学习前端的小陈点个赞吧~~~

声明:本站所有文章           ,如无特殊说明或标注                  ,均为本站原创发布            。任何个人或组织      ,在未征得本站同意时           ,禁止复制                  、盗用     、采集      、发布本站内容到任何网站                  、书籍等各类媒体平台                 。如若本站内容侵犯了原著者的合法权益                 ,可联系我们进行处理     。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
mvc设计模式的运行原理(MVC设计模式、单体架构、前后端分离、微服务)