Je viens d'utiliser la ligne de commande ( CLI) pour initialiser un projet Vue.js. Le dossier et CLIcréé .src/componentssrc/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 viewset componentsdans un projet Vue généré avec vue-cli?

Tout d'abord, les deux dossiers src/componentset src/viewscontiennent des composants Vue.

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

Lors du routage dans Vue, généralement avec Vue Router , les routes sont définies afin de changer la vue actuelle utilisée dans le <router-view>composant. 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/componentssont moins susceptibles d'être utilisés dans un itinéraire tandis que les composants situés sous src/viewsseront utilisés par au moins un itinéraire.

Vue CLI vise à être la référence d'outillage standard pour l'écosystème Vue. Il garantit que les différents outils de construction fonctionnent correctement avec des valeurs par défaut judicieuses afin que vous puissiez vous concentrer sur l'écriture de votre application au lieu de passer des jours à vous débattre avec les configurations. Dans le même temps, il offre toujours la possibilité de modifier la configuration de chaque outil sans avoir besoin d'éjecter.

Vue CLI vise le développement rapide de Vue.js, il simplifie les choses et offre de la flexibilité. Son objectif est de permettre à des équipes de différents niveaux de compétences de monter un nouveau projet et de se lancer.

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

• Certaines personnes aiment avoir leur dossier Views sous src/routercomme ce passe- partout d'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.

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

Les vues généralement réutilisables sont suggérées pour être placées dans le src/componentsrépertoire. Des exemples tels que l'en-tête, le pied de page, les annonces, les grilles ou tout autre contrôle personnalisé comme les zones de texte ou les boutons stylisés Un ou plusieurs composants sont accessibles dans une vue.

Une vue peut avoir des composants et une vue est en fait destinée à être accédée par l'URL de navigation. Ils sont généralement placés src/views.

N'oubliez pas que vous n'êtes pas obligé d'accéder aux composants via l'URL. Vous êtes libre d'ajouter n'importe quel composant au router.jset d'y accéder également. Mais si vous avez l'intention de le faire, vous pouvez le déplacer vers un src/viewsplutôt que le placer src/components.

Les composants sont des contrôles utilisateur par analogie avec les formulaires Web asp.net.

Il s'agit simplement de structurer votre code pour une meilleure maintenance et une meilleure lisibilité.

Les deux dossiers sont fondamentalement les mêmes car ils contiennent tous deux des composants, mais l'esthétique de Vue est que les composants qui fonctionneront comme des pages (acheminés vers une page similaire pour la navigation) sont conservés dans le /viewsdossier, tandis que les composants réutilisables tels que les champs de formulaire sont conservés dans le /componentsdossier .