出现的问题：

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

报错截图如下：

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

报错的原因：

 在组件命名的时候不够规范，根据 ESLint 官方风格指南，除了根组件（App.vue）外，自定义组

件名称应该由多单词组成（使用大驼峰命名方式或者用“-”连接单词），防止和 html 标签冲突;

而最新的 vue-cli 创建的项目使用了最新的 vue/cli-plugin-eslint 插件，在 vue/cli-plugin-eslint v7.20.0

版本之后就引用了 vue/multi-word-component-names 规则，所以在编译的时候判定此次错误。

解决方案： 

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

 文件的名称重命名

修改组件名为多个单词，使用驼峰命名方式或者用“-”连接单词。

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

示例如下：

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

在根目录下找到vue.config.js文件（如果没有则新建一个），添加下面的代码在 vue.config.js 文件下，加入以下代码

lintOnSave: false // 关闭eslint校验

示例如下： 

此方案只是编译时不报错，如果使用 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"]//需要忽略的组件名
    }]

推荐使用方案三，极力推荐！！！

 示例如下：

方案四 ：

方案三是关闭和忽略组件名规则；根据组件名进行忽略

方案四是根据文件进行关闭规则。

关闭某文件命名规则校验

在根目录下找到 .eslintrc.js 文件，（如果没有则新建一个（注意文件前有个点））

在文件的 overrides 中添加如下代码：

{  
 files: ['src/views/index.vue','src/views/**/index.vue'],   // 匹配views和二级目录中的index.vue
 rules: {
 'vue/multi-word-component-names':"off",
 } //给上面匹配的文件指定规则
}

其中的 files: [ ] 是用于匹配文件的，*号代表所有文件。index.vue 也可以改成  *.vue ，这就是匹配目录下的所有 vue 文件

文件内容：

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
  overrides: [
        //这里是添加的代码
        { 
          files: ['src/views/index.vue','src/views/**/index.vue'],   // 匹配views和二级目录中的index.vue
          rules: {
          'vue/multi-word-component-names':"off",
          } //给上面匹配的文件指定规则
        },
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

 四种方案本人建议使用方案三和方案四，本人不建议使用网上普遍的方案二的方法，不好用！

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

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

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

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