El nombre del componente “Temp” siempre debe ser vue de varias palabras/nombres de componentes de varias palabras

3 minutos de lectura

Avatar de usuario de Tushar Bhakare
Tushar Bhakare

Soy nuevo en la tecnología Vue.js. Recibo un error al ejecutar mi aplicación Vue. No sé dónde me equivoqué, intente corregir mi error.

Este es el archivo temporal donde recibo un error.

Temp.vue

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

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

aplicación.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>

Agregue esto a la sección de “reglas” en eslintrc.js si no desea cambiar los nombres de los componentes:

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

(Tomado de la respuesta de @lifecoder arriba, pero no puedo agregarlo como comentario debido a mi reputación)

  • Mis reglas se enumeraron en “eslintConfig” en package.jsony tuve que reiniciar Código VS para que el cambio surta efecto

    – Orgullo

    2 de junio a las 14:59


  • actualizado package.json y sigue apareciendo el error… no tengo un eslintrc.js archivo, así que no sé dónde debería establecer esto …

    – monje

    15 de septiembre a las 1:20

Avatar de usuario de Maximilian Stolz
Maximiliano Stolz

Su linter simplemente le dice que el nombre de su componente debe ser una palabra múltiple como mi temperatura en lugar de solo Temperatura.

Puede cambiar el nombre del componente o deshabilitar la regla de pelusa.

  • ¿Cómo se hace eso en una aplicación vue?

    – AntonyMN

    15 abr a las 10:19

  • Haga clic derecho en el nombre del archivo y cámbiele el nombre a lo que desee.

    – Dgloria

    27 abr a las 10:23

  • ¿Se supone en serio que debe agregar palabras sin sentido a un componente que se ajuste mejor como una sola palabra? Esa parece una regla horrible para ser la predeterminada.

    -Jason Goemaat

    14 de mayo a las 18:10

  • @JasonGoemaat Es así porque en el futuro se pueden crear etiquetas HTML predeterminadas que pueden entrar en conflicto con la forma en que usó los componentes en su código. Pero no tiene sentido, en lugar de eso, simplemente obligue a los desarrolladores a tener componentes en PascalCase. De esa forma, Vue sabe si una etiqueta tiene una letra mayúscula, es 100% un componente. Además, dado que está declarado en el objeto ‘componentes’ de todos modos, no sé si esta regla realmente debería existir, simplemente sobrescriba la etiqueta HTML potencial y eso es todo.

    – Seangle

    6 oct a las 10:02

Avatar de usuario de Eyüp Okur
Eyup Okur

Agregar "rules": {"vue/multi-word-component-names": "off"} a eslintConfig en paquete.json

Avatar de usuario de Mohammad Hosseini
mohammad hosseini

Hay varias cosas que puede hacer para ayudar:

  1. Para nombrar dos inundaciones
  2. Que puedes agregar este código a tu proyecto:
{
   "vue/multi-word-component-names": ["error", {
      "ignores": []
   }]
}

Asegúrese de leer el documento completo en este sitio.

Así que también encuentro el mismo error. Todo lo que tiene que hacer es cambiar el nombre del componente de Temp a MyTemp o cualquier otra combinación de dos palabras.

Aquí, también puede ver y tomar la idea de la documentación de vue/multi-word-component-names. Explicaron las cosas muy claramente y es muy útil: –

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

Avatar de usuario de Joshua
Josué

Vaya al archivo vue.config.js

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

Avatar de usuario de Michel Fernandes
michel fernandes

Simplemente use un nombre de varias palabras, como “MisContadores”, no solo “Contador”.

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

¿Ha sido útil esta solución?