Vue-cli Component name "xxx" should always be multi-word.

先说下环境

vue-cli 版本： @vue/cli 5.0.4
"vue": "^3.2.13",

使用vue create example 创建项目后，在 pages/ 下面添加页面，在文件头部会报错如下：

Component name "home" should always be multi-word.eslint vue/multi-word-component-names

这是因为 eslint-plugin-vue 在校验组件时有这样一条规则

vue/multi-word-component-names: Require component names to be always multi-word

就是要求组件名称必须是多个单词组合，主要是为了防止初学者使用不规范的组件命名和html标签冲突

其实这一条规则还是很有用的，但是呢，我们再写页面组件时就没必要了，因为页面组件是放在 vue-router 中加载的。

在我们新建的vue项目中，如果发现 .eslintrc.js 找不到，大家不要新建了，可以到 package.json 中搜索 eslintConfig 就能找到了 另外当我们修改配置之后发现没有生效，不妨关闭 vscode，重新打开试试

解决方法：

如果我们完全不需要这个规则，可以进行如下配置：

"eslintConfig": {
    ... 省略 ...
    "rules": {
        "vue/multi-word-component-names": "off"
    }
},

如果只针对某些组件不要使用这个规则，可以进行如下配置（官方文档上有）：

"eslintConfig": {
    ... 省略 ...
    "rules": {
        "vue/multi-word-component-names": ["error", {
            "ignores": ["组件名称"]
        }]
    }
},

如果你并不满足于此，比如咱想要 pages/ 目录下都不应用这个规则，components/ 目录下使用这个规则怎么办呢，咱有办法：

"eslintConfig": {
  ... 省略 ...
  "rules": {},
  "overrides": [
    {
      "files": ["src/pages/**"],
      "rules": {
        "vue/multi-word-component-names": "off"
      }
    }
  ]
}

如果你还不满足，比如 pages/ 目录下，对于业务型组件想和页面放在一起以便于快速查找，像下面这样：

怎么解决呢？，咱还有办法，设置如下：

"eslintConfig": {
    ... 省略 ...
    "rules": {},
    "overrides": [
      {
        "files": ["src/pages/**"],
        "excludedFiles": ["src/**/components/**"],
        "rules": {
          "vue/multi-word-component-names": "off"
        }
      }
    ]
}

好了，今天的分享就到这了，希望能够解决大家遇到的问题哦