出现的问题：

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

1
2
3
4
5
6
 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文件（亲测有效）

おすすめ！！！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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' //关闭命名规则，将不会校验组件名，官方建议设置是根据组件名进行忽略
  }
}