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"
    }
}
posted @ 2022-04-18 14:59  Earen  阅读(308)  评论(0编辑  收藏  举报