vue3.2
在 vue eslint 报错 error “Component name should always be multi-word”,该怎么办?
在 vue eslint 报错 error “Component name should always be multi-word”,该怎么办?:Tarvent 的个人学习与实践记录。

vue学习
出现的问题:
在 vue-cli 创建的项目中,创建文件并命名后,会报 “Component name “****” should always be multi-word”报错;
1:1 error Component name "index" should always be multi-word vue/multi-word-component-names
✖ 1 problem (1 error, 0 warnings)
webpack compiled with 1 error
报错的原因:
在组件命名的时候不够规范,根据 ESLint 官方风格指南,除了根组件(App.vue)外,自定义组 件名称应该由多单词组成(使用大驼峰命名方式或者用“-”连接单词),防止和 html 标签冲突; 而最新的 vue-cli 创建的项目使用了最新的 vue/cli-plugin-eslint 插件,在 vue/cli-plugin-eslint v7.20.0 版本之后就引用了 vue/multi-word-component-names 规则,所以在编译的时候判定此次错误
方案一 :重命名(亲测有效)
文件的名称重命名 修改组件名为多个单词,使用驼峰命名方式或者用“-”连接单词。 myUser
方案二 :配置 .eslintrc.js文件(亲测有效)
おすすめ!!!
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/vue3-essential',
'@vue/standard'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'indent': 0,
'space-before-function-paren': 0,
'vue/multi-word-component-names':'off' //关闭命名规则,将不会校验组件名,官方建议设置是根据组件名进行忽略
}
}