Comment structurer un projet Vue.js

La structure de dossiers et l'architecture de composants Vue.js parfaits avec des composants intelligents et stupides

Vue.js est plus qu'un battage médiatique, c'est un excellent framework frontal. Il est assez facile de commencer et de créer une application Web. Vue.js est souvent décrit comme un framework pour les petites applications et même parfois comme une alternative à jQuery en raison de sa petite taille! Je pense personnellement qu'il peut également convenir à des projets plus importants et dans ce cas, il est important de bien le structurer, en termes d'architecture des composants.

Avant de commencer mon premier grand projet Vue.js, j'ai fait quelques recherches afin de trouver la structure de dossier, l'architecture de composant et la convention de dénomination parfaites. J'ai parcouru la documentation Vue.js, quelques articles et de nombreux projets open source GitHub.

J'avais besoin de trouver les réponses à quelques questions que j'avais. C’est ce que vous trouverez dans cet article:

  • Comment structurez-vous les fichiers et dossiers à l'intérieur du projet Vue.js?
  • Comment écrivez-vous les composants Smart et Dumb et où les placez-vous? C’est un concept issu de React.
  • Quels sont le style de codage Vue.js et les meilleures pratiques?

Je documenterai également avec la source qui m'a inspiré et d'autres liens pour mieux comprendre.

Structure du dossier Vue.js

Voici le contenu du dossier src. Je vous recommande de démarrer le projet avec Vue CLI. J'ai personnellement utilisé le modèle Webpack par défaut.

.
├── app.css
├── App.vue
├── actifs
│ └── ...
├── composants
│ └── ...
├── main.js
├── mixins
│ └── ...
├── routeur
│ └── index.js
├── magasin
│ ├── index.js
│ ├── modules
│ │ └── ...
│ └── mutation-types.js
├── traductions
│ └── index.js
├── utils
│ └── ...
└── vues
    └── ...

Quelques détails sur chacun de ces dossiers:

  • actifs - Où vous placez tous les actifs qui sont importés dans vos composants
  • composants - Tous les composants des projets qui ne sont pas les vues principales
  • mixins - Les mixins sont les parties du code javascript qui sont réutilisées dans différents composants. Dans un mixin, vous pouvez placer les méthodes de n'importe quel composant à partir de Vue.js, elles seront fusionnées avec celles du composant qui l'utilise.
  • router - Toutes les routes de vos projets (dans mon cas je les ai dans le index.js). Fondamentalement, dans Vue.js, tout est un composant. Mais tout n'est pas une page. Une page a un itinéraire comme «/ tableau de bord», «/ paramètres» ou «/ recherche». Si un composant a une route, il est routé.
  • store (facultatif) - Les constantes Vuex dans mutation-type.js, les modules Vuex dans les modules de sous-dossier (qui sont ensuite chargés dans index.js).
  • traductions (facultatif) - Fichiers de paramètres régionaux, j'utilise Vue-i18n, et cela fonctionne plutôt bien.
  • utils (facultatif) - Fonctions que j'utilise dans certains composants, tels que le test de valeur d'expression régulière, les constantes ou les filtres.
  • vues: pour accélérer la lecture du projet, je sépare les composants routés et les place dans ce dossier. Les composants qui sont routés pour moi sont plus qu'un composant car ils représentent des pages et ils ont des routes, je les mets en "vues" puis quand vous vérifiez une page vous allez dans ce dossier.

Vous pouvez éventuellement ajouter d'autres dossiers en fonction de vos besoins, tels que des filtres ou des constantes, API.

Quelques ressources qui m'ont inspiré

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Composants intelligents vs stupides avec Vue.js

Les composants intelligents et stupides sont un concept que j'ai appris de React. Les composants intelligents sont également appelés conteneurs, ce sont eux qui gèrent les changements d'état, ils sont responsables de la façon dont les choses fonctionnent. Au contraire, les composants muets, également appelés présentationnels, ne gèrent que l'apparence.

Si vous connaissez le modèle MVC, vous pouvez comparer les composants de vidage à la vue et les composants intelligents au contrôleur!

Dans React, les composants intelligents et stupides sont généralement placés dans des dossiers différents tandis que dans Vue.js, vous les placez tous dans le même dossier: les composants. Pour différencier dans Vue.js, vous utiliserez une convention de dénomination. Disons que vous avez un composant de carte muette, alors vous devez utiliser l'un de ces noms:

  • BaseCard
  • AppCard
  • VCard

Si vous avez un composant intelligent qui utilise BaseCard et lui ajoute des méthodes, vous pouvez par exemple le nommer, en fonction de votre projet:

  • ProfileCard
  • ItemCard
  • NewsCard

Si votre composant intelligent n'est pas seulement une BaseCard «plus intelligente» avec des méthodes, utilisez simplement n'importe quel nom qui correspond à votre composant et sans commencer par Base (ou App ou V), par exemple:

  • Tableau de bordStatistiques
  • Résultats de la recherche
  • Profil de l'utilisateur

Cette convention de dénomination provient du guide de style officiel Vue.js qui contient également des conventions de dénomination!

Conventions de nommage

Voici quelques conventions issues du guide de style officiel de Vue.js dont vous avez besoin pour bien structurer votre projet:

  • Les noms de composants doivent toujours être composés de plusieurs mots, à l'exception des composants racine «App». Utilisez par exemple «UserCard» ou «ProfileCard» au lieu de «Card».
  • Chaque composant doit se trouver dans son propre fichier.
  • Les noms de fichiers des composants à fichier unique doivent être toujours PascalCase ou toujours kebab-case. Utilisez «UserCard.vue» ou «user-card.vue».
  • Les composants qui ne sont utilisés qu'une fois par page doivent commencer par le préfixe «The», pour indiquer qu'il ne peut y en avoir qu'un. Par exemple, pour une barre de navigation ou un pied de page, vous devez utiliser "TheNavbar.vue" ou "TheFooter.vue".
  • Les composants enfants doivent inclure leur nom parent en tant que préfixe. Par exemple, si vous souhaitez qu'un composant "Photo" soit utilisé dans la "UserCard", vous le nommerez "UserCardPhoto". C'est pour une meilleure lisibilité, car les fichiers d'un dossier sont généralement classés par ordre alphabétique.
  • Utilisez toujours le nom complet au lieu de l'abréviation dans le nom de vos composants. Par exemple, n'utilisez pas «UDSettings», utilisez plutôt «UserDashboardSettings».

Guide de style officiel Vue.js

Que vous soyez avancé ou débutant avec Vue.js, vous devriez lire ce guide de style Vue.js, il contient de nombreux conseils et conventions de dénomination. Il contient de nombreux exemples de choses à faire et à ne pas faire.

Si vous avez aimé cet article, veuillez cliquer plusieurs fois sur le bouton ap ci-dessous pour montrer votre soutien! N'hésitez pas non plus à commenter et à donner votre avis. N'oubliez pas de me suivre!

Vous voulez voir plus d'articles comme celui-ci? Soutenez-moi sur Patreon