组件名称"Temp"应始终为多字 vue/多词组件名

Question

我是Vue.js技术的新手。运行Vue应用程序时出错。不知道我错在哪里，请设法纠正我的错误。

这是我收到错误的临时文件。

Temp.vue

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

Answer 1

将其添加到"规则"-如果您不想更改组件名称，请参阅eslintrc.js上的部分：

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

(摘自@lifecoder的回复，但由于我的声誉，无法添加为评论(

Answer 2

您的linter只是告诉您，您的组件名称应该是多个单词，如MyTemp，而不仅仅是

Temp可以重命名构件或禁用过梁规则。

Answer 3

将"rules": {"vue/multi-word-component-names": "off"}添加到package.json 中的eslintConfig

Answer 4

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

1. 命名两次洪水
2. 您可以将此代码添加到您的项目中：

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

请务必查看此网站上的完整文档。

Answer 5

所以我也遇到了同样的错误，你所要做的就是将组件的名称从Temp更改为MyTemp或任何其他两个单词的组合。

在这里，你还可以看到并从vue/多词组件名称文档中获得想法，它们解释得非常清楚，非常有用：-

https://eslint.vuejs.org/rules/multi-word-component-names.html

Answer 6

我建议更改组件的名称。Temp到MyTemp。

因此，将所有有Temp的地方都替换为MyTemp

并尝试像这样重命名声明部分，而不是MyTemp

<my-temp />

Answer 7

只需使用多个单词的名称，如"MyCounters"；，不仅"；计数器"；。

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

Answer 8

转到vue.config.js文件

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

Answer 9

在组件中

Export default {
Name : '( this name )'

此名称应为多个单词例如

(mytepm)📛
(MyTemp)🟢

Answer 10

在<script setup>语法中，组件名称是根据文件名推断出来的，该文件名应以类似的PascalCase格式编写

TempComp.vue

或烤串格式：

temp-comp.vue

可以接受其他格式，如tempComp或temp-Comp，但它们看起来很糟糕

有关更多详细信息，请查看规则详细信息