前言

• 当咱们创立好项目之后，会在 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规矩

• 将组件称号悉数运用多单词表明；