组件名称“ temp”应始终是多字vue/多字组件名称

Question

<template>
  <div>
    <h1>Hello Ashish</h1>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
export default {
  name: "Temp",
};
</script>

app.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <!-- <HomeComp msg="Hello Harshal"/> -->
  <!-- <ForLoop/> -->
  <Temp/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
// import HomeComp from './components/HomeComp.vue';
// import ForLoop from './components/ForLoop.vue';
import Temp from './components/Temp.vue';


export default {
  name: 'App',
  components: {
    HelloWorld,
    // HomeComp,
    // ForLoop
    // Demo,
    Temp
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

如果您不想更改组件名称：

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

（取自上面@LifeCoder的响应，但由于我的声誉而无法将其添加为评论）

Answer 1

您的linter只是告诉您，您的组件名称应该是一个多词，例如

Mytemp

，而不是

Temp

.

。 您可以重命名组件或禁用鳞片规则。

Answer 2

add

"rules": {"vue/multi-word-component-names": "off"}topackage.json中的eslintconfig

您可以做几件事来提供帮助：

Answer 3

您可以将此代码添加到您的项目：

{
   "vue/multi-word-component-names": ["error", {
      "ignores": []
   }]
}

Answer 4

一定要查看this网站上的完整文档。

因此，我还遇到相同的错误，您要做的就是将组件的名称从温度更改为myTemp或任何其他两个单词组合。
1. 这里，您还可以从VUE/多字组件名称文档中看到并获取这个想法，他们非常清楚地解释了事情，并且非常有帮助：-
https：//eslint.vuejs.org/rules/multi-word-component-names.html

我建议更改组件的名称。临时到mytemp. so替换每个您的临时位置

尝试重命名这样的声明部分，而不是mytemp

Answer 5

<my-temp />

仅使用多个单词名称，例如“ mycounters”，而不仅仅是“计数器”。

export default {
  name: "MeusContadores",
  components: {
    "app-contador": MeuContador,
  },
};

Answer 6

const { defineConfig } = require('@vue/cli-service')
  module.exports = defineConfig({
  transpileDependencies: true,
  // Add this line of code to disable lintOnSave
  lintOnSave: false
})

在您的组件中

Export default {
Name : '( this name )'

这个名称应该是多字 例如

Answer 7

(mytepm)📛
(MyTemp)🟢

在

Answer 8

语法中，组件名称是从应以pascalcase格式编写的文件名推断出的

TempComp.vue

或烤肉串格式：

Answer 9

其他格式（例如

tempComp

或

temp-Comp

都被接受，但它们看起来不好

有关更多详细信息，请检查rule-details

Answer 10

默认情况下，如果您不在项目中创建多个字组件，那么Lint就会对您吠叫。这是一个很好的做法，因为它是防止名称冲突的。

一个项目可以具有组件名称模式，并且同一名称可以在您的项目依赖的其他几个不同项目中显示。

解决问题，您可以尝试创建诸如

MyModal

或'mycompanymodal`.

的多字组件。 请记住，尽管这应该可以防止冲突，但如果您的组件本质上是多词组件，则不会属于该规则。尽管它仍然有犯有冲突的风险。 （即登录模式，登录页....）

如果您希望保留组件的名称，则可以简单地要求皮棉忽略多字组件规则：

#eslint.config.js
import globals from "globals";
import pluginJs from "@eslint/js";
import pluginVue from "eslint-plugin-vue";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {
      files: ["resources/**/*.{js,mjs,cjs,vue}"],
      rules: {
        'vue/multi-word-component-names': ["error", {
          "ignores": ['Checkbox', 'Dropdown']
        }]
      }

  },
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...pluginVue.configs["flat/essential"]
];

在我的配置中，我要求该规则忽略组件是否是

ignores

键中定义的一个。 这通常是在您的配置文件中。您需要确定配置的文件是什么。以我为例