vue3.x:报错清单及解决记录

 更新时间:2023年07月05日 14:54:45   作者:黑萝卜不黑  
这篇文章主要为大家介绍了vue3.x:报错清单及解决记录详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

报错提示

component name “index“ should always be multi-word

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

解决方式

1. 修改文件名称

修改组件名为多个单词,使用大驼峰或是小驼峰命名规则。

2. 关闭eslint校验

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

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 添加此行代码
  lintOnSave:false
})

3. 关闭命名规则校验

在根目录下找到 .eslintrc.js 文件,同样如果没有则新建一个(注意文件前有个点),添加下面的代码:

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

示例

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  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",
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

4. 官方建议忽略个别组件名

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  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": ["error",{
       //  需要忽略的组件名
       "ignores": ["index"]
    }]
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

以上就是vue3.x:报错清单及解决记录的详细内容,更多关于vue3.x报错解决的资料请关注脚本之家其它相关文章!

相关文章

  • element-plus的el-table自定义表头筛选查询功能实现

    element-plus的el-table自定义表头筛选查询功能实现

    这篇文章主要介绍了element-plus的el-table自定义表头筛选查询功能实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-07-07
  • vue页面设置滚动失败的完美解决方案(scrollTop一直为0)

    vue页面设置滚动失败的完美解决方案(scrollTop一直为0)

    这篇文章主要介绍了vue页面设置滚动失败的解决方案(scrollTop一直为0),本文通过场景分析实例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue首页加载过慢的解决方式

    Vue首页加载过慢的解决方式

    这篇文章主要介绍了Vue首页加载过慢的解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue跨域proxy代理配置详解

    vue跨域proxy代理配置详解

    今天被vue中proxy配置困扰了一天,记录一下,下面这篇文章主要给大家介绍了关于Vue配置文件中的proxy配置方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue3+three.js实现疫情可视化功能

    vue3+three.js实现疫情可视化功能

    这篇文章主要介绍了vue3+three.js实现疫情可视化,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • vue 解决form表单提交但不跳转页面的问题

    vue 解决form表单提交但不跳转页面的问题

    今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue中 axios delete请求参数操作

    Vue中 axios delete请求参数操作

    这篇文章主要介绍了Vue中 axios delete请求参数操作,具有很好的参考价值,希望对大家有所 帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue实现打卡功能

    vue实现打卡功能

    这篇文章主要为大家详细介绍了vue实现打卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Vue使用mixin分发组件的可复用功能

    Vue使用mixin分发组件的可复用功能

    这篇文章主要介绍了Vue使用mixin分发组件的可复用功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Vue中methods的this指向问题浅析

    Vue中methods的this指向问题浅析

    相信我们写Vue代码时肯定都会在methods中用过this这个关键字,甚至还打印过this查看其内容。最终发现该实例对象竟然是我们的Vue实例对象
    2022-10-10

最新评论