在 vue eslint 报错 error “Component name “*****“ should always be multi-word”，该怎么办？-Toy模板网

这篇具有很好参考价值的文章主要介绍了在 vue eslint 报错 error “Component name “*****“ should always be multi-word”，该怎么办？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

出现的问题：

报错的原因：

解决方案：

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

方案二：配置 vue.config.js 文件（网上方法，本人使用无效）

方案三：配置 .eslintrc.js文件（亲测有效）

1、关闭命名规则

2、忽略个别组件名

非常重要的注意点：（重启项目，配置文件才生效）

出现的问题：

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

报错截图示例如下：

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

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

报错的原因：

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

解决方案：

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

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

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

示例如下：

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

方案二：配置 vue.config.js 文件（网上方法，本人使用无效）

在根目录下找到 vue.config.js 文件（如果没有则新建一个，按照示例中的代码进行添加；用 vue-cli 脚手架进行创建的项目都会有 vue.config.js 文件），添加下面的代码在 vue.config.js 文件下，加入以下代码
// 关闭eslint校验
lintOnSave: false 

示例如下：

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

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

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

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

方案三：配置 .eslintrc.js文件（亲测有效）

1、关闭命名规则

找到 .eslintrc.js 文件在 rules 里面加上这么一句
// 关闭名称校验
'vue/multi-word-component-names': "off" 
建议使用这种方法，更加正确合理；

示例如下：

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

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

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

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

2、忽略个别组件名

    // 添加组件命名忽略规则

    "vue/multi-word-component-names": ["error",{
       "ignores": ["Home","User"]  //在这个数组中加入需要忽略的组件名
    }]

非常重要的注意点：（重启项目，配置文件才生效）

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

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

如果有问题，欢迎大家评论区讨论，文章对你有用，给正在学习前端的小陈点个赞吧~~~文章来源地址https://www.toymoban.com/news/detail-406931.html

到了这里，关于在 vue eslint 报错 error “Component name “*****“ should always be multi-word”，该怎么办？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！