error Component name “Hello“ should always be multi-word vue/multi-word-component-names

前言

使用vue-cli创建Vue项目

环境

• node -v: v16.15.1
• npm -v: 8.11.0
• 其他包版本：
  @babel/eslint-parser@7.19.1
  @vue/cli-plugin-eslint@5.0.8
  eslint-plugin-vue@8.7.1
  eslint@7.32.0
  vue@2.7.13

报错信息

1:1  error  Component name "Hello" should always be multi-word  vue/multi-word-component-names

报错原因

eslint-plugin-vue 版本更新到@8，相较之前版本，@8 版本中新增了不少规则，其中要求组件名称以驼峰格式命名

// node_modules\eslint-plugin-vue\lib\configs\vue3-essential.js
  ...
  rules: {
    'vue/multi-word-component-names': 'error',
    ...
  }
  ...

解决办法

• 方法一：遵守规则
  将组件名改为驼峰格式命名，如hello 改为 helloHello
• 方法二：关闭规则，编辑项目根目录下的vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,    // 新增代码
})