Vue——组件命名报错 “Component name “XXX“ should always be multi-word”的解决方法

最新推荐文章于 2024-10-22 10:33:45 发布

转载最新推荐文章于 2024-10-22 10:33:45 发布 · 2.9k 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/dxnn520/article/details/125252353?ops_request_misc=&request_id=&biz_id=102&utm_term=Component%20name%20%22Company%22%20shoul&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-125252353.142^v47^pc_rank_3

文章标签：

#vue.js #前端 #javascript

Vue 同时被 2 个专栏收录

22 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了两种方法避免Vue组件命名冲突。首先，建议使用大驼峰命名法，避免与系统命令名相似。其次，提供了.eslintrc.js配置文件的内容，关闭了vue/multi-word-component-names规则，并在VSCode中进行配置更新。确保修改后重新加载项目生效。

第一种解决方法：修改组件名称为大驼峰，不要用系统中命令常见的名称。

第二种解决方法：

在根目录下，打开【.eslintrc.js】文件，如果没有，就新建，内容

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
        }
      }
    ]
  }

注意：修改完，如果还不行，就退出VsCode，再重新打开项目。