前端开发小技巧 - 解决组件必须多单词问题（Component name "index" should always be multi-word）

前言

• 当我们创建好项目之后，会在 views 下面创建对应的文件夹，一般文件夹下的第一个文件都是 index.vue；
• 但是当我们保存之后，就会有错误提示；
  • Component name "index" should always be multi-word组件名 index 应该总是由多个单词组成；
  • 
• 虽然这个提示不影响我们代码的运行，但是爆红就很难受（我有强迫症😂），所以最好还是解决掉；

一、问题出现原因

• 这是由于我们没有按照ESLint所制定的组件命名规则引起的；
  • 按照ESLint的规则：
    • 组件名称必须是多个单词组成的，除根组件App.vue外 (避免现有的以及未来的HTML元素冲突)；
    • 单文件组件的文件名要么是单词大写开头 (PascalCase✅)，要么是横线连接 (kebab-case❌)；
• 知道了问题出现的原因，下面就来看看解决方案吧；

二、解决方法

2.1 ✅ 修改ESLint对于组件名称规则

• 不管是Vue2还是Vue3的项目，我们创建好项目之后，项目根目录 下都会有 .eslintrc.js 这个文件；

• 这个文件里面保存的就是 ESLint 的相关配置（如果没有该文件，可以自己手动创建一个）；

  • 

• 在文件中添加以下代码：

  module.exports = {
      // 其他配置
      ...,
      
      rules: {
          // 如果组件名称为 index，ESLint 就会忽略此次组件名称的检查
          'vue/multi-word-component-names': [
              'warn',
              {
                  // 指定需要忽略的组件名称
                  ignores: ['index']
              }
          ]
      },
      
      // 其他配置
      ...
  };

• 添加完毕，保存即可；

• • 解释：
  • 该规则用于检查Vue组件的名称是否符合要求；
  • 具体来说：
    • 该规则会检查组件名称是否有多个单词组成，并且是否符合一定的命名规范；
    • 如果组件名称不符合要求，该规则会发出警告；
    • 此外，该规则还提供了一个选项，用于指定一个数组，其中包含一些可以忽略的组件名称，这些组件名称将不会被检查，即使他们不符合命名规范；

2.2 ❌ Vue2项目

• 在项目的根目录里面找到vue.config.js文件，如果没有就自己创建一个；

  • 

• 在该文件中添加如下代码：

  module.exports = {
      // 其他配置
      ...,
      
      // 关闭ESLint校验
      lintOnSave: false,
      
      // 其他配置
      ...
  };

• 保存后重新编译即可；

2.3 ❌ 完全按照ESLint规则

• 将组件名称全部使用多单词表示；