vue 排错

error The template root requires exactly one element vue/no-multiple-template-root ...

解决办法：

.eslintrc.js 文件 extends 中的 ‘plugin:vue/essential’，改成’plugin:vue/vue3-essential’

error The "page" component has been registered but not used vue/no-unused-components

解决办法：

1. 在script 中 导入要用的组件：import XXX from ‘./components/XXX.vue’
2. 在 components 里注册该组件
3. 在template中使用该组件

error Component name "index" should always be multi-word vue/multi-word-component-names

原因：

组件命名的时候不够规范，根据官方风格指南，除了根组件（App.vue）外，自定义组件名称应该由多单词组成，防止和html标签冲突。而最新的vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names规则，所以在编译的时候判定此次错误。

解决办法：

方案一

修改组件名为多个单词，使用大驼峰命名方式或者用“-”连接单词。但是有时候因为个别原因不能改名，此方案不好用。

方案二：

关闭校验

在根目录下找到vue.config.js文件（如果没有则新建一个），添加下面的代码

lintOnSave: false

添加后文件示例：

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false //关闭eslint校验
});

方案三

在根目录下找到 .eslintrc.js 文件，同样如果没有则新建一个（注意文件前有个点），代码如下

添加一行:

"vue/multi-word-component-names":"off",

添加后文件示例：

module.exports={
    root:true,
    env:{
      node:true
    },
    extends:[
        'plugin:vue/vue3-essential'
    ],
    parserOptions: {

    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

        //在rules中添加自定义规则
        //关闭组件命名规则
        "vue/multi-word-component-names":"off"
    }
}