【Vue】在vue中命名的时候会遇到 component name “index” should always be multi-word的解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue】在vue中命名的时候会遇到 component name “index” should always be multi-word的解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【Vue】在vue中命名的时候会遇到 component name “index” should always be multi-word的解决方案

解决方案
1.1 直接改名
1.2 关闭检验
1.3 关闭命名规则校验
1.4 建议官方的配置
1. 报错代码
使用脚手架创建一个新的项目后，在给组件下的文件取名为index.vue后，第一行飘红，提示信息如下：翻译过来的意思就是组件名要以多个单词组件

Component name "index" should always be multi-word

2. 解决方案
2.1 第一种方法直接改名
修改组件名为多个单词，使用驼峰命名方式或者用-连接单词。但是有时候我们会因为个别原因不能改名，那么可以采用下面的方法。

2.2 第二种方法关闭检验
在根目录下找到vue.config.js文件（如果没有则新建一个），添加下面的代码

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

2.3 第三种方法关闭命名规则校验
在根目录下找到 .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
      }
    }
  ]
}

2.4 第四种方法官方建议的设置
官方建议设置是根据组件名进行忽略个别组件名(这个建议看看忽略index，main.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": ["error",{
       "ignores": ["index","main"]//需要忽略的组件名
    }]
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

以上关于文件命名的总结！！！文章来源地址https://www.toymoban.com/news/detail-572206.html

到了这里，关于【Vue】在vue中命名的时候会遇到 component name “index” should always be multi-word的解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！