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

Question

J'ai simplement utilisé la ligne de commande (CLI) pour initialiser un Vue.js projet. L' CLI créé un src/components et src/views le dossier.

Il a été quelques mois depuis que j'ai travaillé avec une Vue de projet et la structure de dossier est nouveau pour moi.

Quelle est la différence entre le views et components des dossiers dans un projet Vue généré avec vue-cli?

Answer 1

Tout d'abord, les deux dossiers, src/components et src/views, contiennent de Vue des composants.

La principale différence est que certaines de Vue des composants agissent comme des points de Vue pour le routage.

Lorsque vous traitez avec de routage en Vue, généralement avec Vue Routeur, les routes sont définies afin de changer la vue utilisée dans l' <router-view> de la composante. Ces itinéraires sont généralement situés à l' src/router/routes.js, où l'on peut 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 alors que les composants situés sous src/views sera utilisé par au moins un itinéraire.

---

Vue de la CLI vise à être la norme de l'outillage de base pour la Vue de l'écosystème. Il assure les différentes construire des outils de travail bien ensemble avec des paramètres par défaut vous pouvez donc vous concentrer sur l'écriture de votre application au lieu de les dépenses jours en proie à des configurations. Dans le même temps, il offre la flexibilité de modifier la config de chaque outil sans la nécessité pour l'éjection.

Vue de la CLI vise rapide Vue.js développement, il garde les choses simples et offre de la souplesse. Son objectif est de permettre à des équipes de différents niveaux de compétence pour définir un nouveau projet et de commencer.

À la fin de la journée, c'est une question de commodité et de la structure de l'application.

• Certaines personnes aiment avoir leur point de Vue sous-dossier src/routercomme cette entreprise standard.
• Certains l'appellent Pages au lieu de Vues.
• Certaines personnes ont toutes leurs composantes dans le même dossier.

---

Choisir la structure de l'application qui convient le mieux au projet sur lequel vous travaillez.

Answer 2

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

Answer 3

Généralement réutilisables points de vue sont proposés pour être placé dans src/components répertoire. Des exemples comme en-Tête, Pied de page, des Annonces, des Grilles ou des contrôles personnalisés aime sytled zones de texte ou des boutons. Un ou plusieurs composants peuvent être consultées à l'intérieur d'un point de vue.

Une Vue peut avoir des composant(s) et d'un point de vue est en fait destiné à être consulté par la navigation de l'url. Ils sont généralement placés en src/views.

Rappelez-vous que vous n'êtes pas limité à l'accès aux Composants via l'url. Vous êtes libre d'ajouter un composant pour l' router.js et l'accès aussi. Mais si vous avez l'intention de le faire, vous pouvez le déplacer à un src/views plutôt que de la placer en src/components.

Les composants sont de l'utilisateur-les commandes de l'analogie à asp.net les formulaires web.

Son juste au sujet de structurer votre code pour un meilleur entretien et une meilleure lisibilité.