Vue组件命名报错 Component name “index“ should always be multi-word

原因        

        在Vue创建组件时我们往往会使用 index.vue 之类来命名，但是此时组件会报错【Component name "index" should always be multi-word】，组件名应该总是为多个单词组成。这是因为官方文档建议组件名写成驼峰式或者-衔接的形式，故在编译的时候把命名不规范的代码判定为不规格；

解决

直接修改组件名

        我们直接根据官方文档的建议修改组件名，使用驼峰命名方式或者用-连接单词。但是这没有直接解决我们问题，我们还是会采用其他方法。

关闭命名规则校验

        在项目根目录下找到  .eslintrc.js  文件，无此文件在根目录下创建该文件。在校验规则下关闭命名检测  'vue/multi-word-component-names': 'off'。代码如下：

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    //关闭组件命名规则
    'vue/multi-word-component-names': 'off'
  }
}

关闭每次保存都进行检测

        如果你是使用 vue-cli 创建的vue项目，可在根目录下找到 vue.config.js文件，同样没有则新建一个，添加下面的代码：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 关闭每次保存都进行检测
  lintOnSave:false
})