Der Komponentenname „Temp“ sollte immer ein aus mehreren Wörtern bestehender vue/multi-word-component-names sein

Lesezeit: 3 Minuten

Benutzeravatar von Tushar Bhakare
Tushar Bhakare

Ich bin neu in der Vue.js-Technologie. Ich erhalte eine Fehlermeldung, während ich meine Vue-Anwendung ausführe. Ich weiß nicht, wo ich falsch liege, versuchen Sie bitte, meinen Fehler zu beheben.

Dies ist die temporäre Datei, in der ich einen Fehler erhalte.

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>

Fügen Sie dies dem Abschnitt “Regeln” in eslintrc.js hinzu, wenn Sie die Komponentennamen nicht ändern möchten:

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

(Aus der obigen Antwort von @lifecoder entnommen, kann es aber aufgrund meines Rufs nicht als Kommentar hinzufügen)

  • Meine Regeln wurden unter “eslintConfig” in aufgelistet package.jsonund ich musste neu starten VS-Code, damit die Änderung wirksam wird

    – Stolz

    2. Juni um 14:59 Uhr


  • Aktualisiert package.json und bekomme immer noch den Fehler … habe kein eslintrc.js Datei, also weiß ich nicht, wo das eingestellt werden soll …

    – Mönchskutte

    15. September um 1:20 Uhr

Benutzeravatar von Maximilian Stolz
Maximilian Stolz

Ihr Linter sagt Ihnen nur, dass Ihr Komponentenname aus mehreren Wörtern bestehen sollte MeineTemp statt nur Temp.

Sie könnten die Komponente umbenennen oder die Linting-Regel deaktivieren.

  • Wie macht man das in einer vue-App?

    – AntonyMN

    15. April um 10:19 Uhr

  • Klicken Sie mit der rechten Maustaste auf den Dateinamen und benennen Sie ihn nach Belieben um.

    – Dgloria

    27. April um 10:23 Uhr

  • Sollen Sie ernsthaft bedeutungslose Wörter zu einer Komponente hinzufügen, die am besten als einzelnes Wort passt? Das scheint eine schreckliche Regel zu sein, um die Standardeinstellung zu sein.

    – Jason Goemaat

    14. Mai um 18:10 Uhr

  • @JasonGoemaat Das ist so, weil in Zukunft möglicherweise Standard-HTML-Tags erstellt werden, die mit der Verwendung von Komponenten in Ihrem Code in Konflikt stehen können. Aber es ist irgendwie sinnlos, stattdessen zwingen Sie Entwickler einfach dazu, Komponenten in PascalCase zu haben. Auf diese Weise weiß Vue, ob ein Tag einen Großbuchstaben hat, es ist zu 100 % eine Komponente. Da es sowieso im ‘components’-Objekt deklariert ist, weiß ich nicht, ob diese Regel wirklich existieren sollte, überschreiben Sie einfach das potenzielle HTML-Tag und das war’s.

    – Seangle

    6. Oktober um 10:02 Uhr

Benutzeravatar von Eyüp Okurs
Eyüp Okur

Hinzufügen "rules": {"vue/multi-word-component-names": "off"} zu eslintConfig in package.json

Benutzeravatar von Mohammad Hosseini
Mohammed Hosseini

Es gibt mehrere Dinge, die Sie tun können, um zu helfen:

  1. Um zwei Hochwasser zu nennen
  2. Dass Sie diesen Code zu Ihrem Projekt hinzufügen können:
{
   "vue/multi-word-component-names": ["error", {
      "ignores": []
   }]
}

Schauen Sie sich unbedingt das vollständige Dokument an Diese Seite.

Also stoße ich auch auf den gleichen Fehler. Alles, was Sie tun müssen, ist, den Namen der Komponente von Temp in MyTemp oder eine andere Kombination aus zwei Wörtern zu ändern.

Hier können Sie auch die Idee aus der vue/multi-word-component-names-Dokumentation sehen und übernehmen. Sie haben die Dinge sehr klar erklärt und sind sehr hilfreich: –

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

Joshuas Benutzeravatar
Josua

Gehen Sie zur Datei vue.config.js

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

Benutzeravatar von Michel Fernandes
Michel Fernandes

Verwenden Sie einfach einen aus mehreren Wörtern bestehenden Namen wie “MyCounters”, nicht nur “Counter”.

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

1433850cookie-checkDer Komponentenname „Temp“ sollte immer ein aus mehreren Wörtern bestehender vue/multi-word-component-names sein

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy