web-dev-qa-db-fra.com

Quelle est la différence entre les dossiers de vues et de composants dans un projet Vue?

Je viens d'utiliser la ligne de commande (CLI) pour initialiser un projet Vue.js. La CLI a créé un dossier _src/components_ et _src/views_.

Cela fait quelques mois que je travaille sur un projet Vue et la structure des dossiers me semble nouvelle.

Quelle est la différence entre les dossiers views et components d'un projet Vue généré avec vue-cli ?

vue.jsvuejs2vue-clivue-cli-3
58
drsnark

Tout d'abord, les deux dossiers, _src/components_ et _src/views_, contiennent les composants Vue.

La principale différence est que certains composants Vue agissent comme des vues pour le routage.

Lorsque vous traitez avec Routing dans Vue, généralement avec Vue Router , des routes sont définies afin de permuter le courant vue utilisée dans le composant <router-view> . Ces itinéraires sont généralement situés à _src/router/routes.js_, où nous pouvons voir quelque chose comme ceci:

_import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
]
_

Les composants situés sous _src/components_ sont moins susceptibles d'être utilisés dans une route, tandis que les composants situés sous _src/views_ seront utilisés par au moins une route.

Vue CLI a pour objectif d’être la base d’outillage standard pour l’écosystème Vue. Il veille au bon fonctionnement des divers outils de construction et à des valeurs par défaut judicieuses afin que vous puissiez vous consacrer à l'écriture de votre application plutôt que de passer des jours à vous disputer avec des configurations. Dans le même temps, il offre toujours la possibilité de modifier la configuration de chaque outil sans avoir à éjecter.

Vue CLI vise un développement rapide de Vue.js, il garde la simplicité et offre une grande flexibilité. Son objectif est de permettre aux équipes de différents niveaux de compétences de mettre en place un nouveau projet et de se lancer.

En fin de journée, , c'est une question de commodité et de structure d'application .

  • Certaines personnes aiment avoir leur dossier Vues sous _src/router_ comme this entreprise.
  • Certaines personnes l'appellent Pages au lieu de Vues .
  • Certaines personnes ont tous leurs composants dans le même dossier.

Choisissez la structure d'application qui convient le mieux au projet sur lequel vous travaillez.

Bonus: Dan Abramov recommande this structure du fichier pour React et Vue projets.

91
Ricky

Je pense que c'est plus une convention. Quelque chose qui est réutilisable peut être conservé dans le dossier src/components quelque chose qui est lié au routeur peut être conservé dans src/views

7
Ravi