Cet article à pour objectif de démystifier la structure global d’un projet VueJS, il s’adresse donc surtout aux personnes débutants sur ce framework. Vous trouverez les sources sur lesquelles je me suis basé pour la rédaction de cet article en bas de page.
Après l’installation, vous pouvez voir la structure de dossier suivante en dépend des options que vous avez sélectionnées dans Vue CLI (pour ce projet, j’ai sélectionné toutes les options possibles) :
— public
— — img
— — — icons
— — favicon.ico
— — index.html
— — robots.txt
— src
— — assets
— — — logo.png
— — components
— — — HelloWorld.vue
— — router
— — — index.ts
— — store
— — — index.ts
— — views
— — — About.vue
— — — Home.vue
— — App.vue
— — main.ts
— — registerServiceWorkers.ts
— — shims-vue.d.ts
— tests
— — e2e
— — unit
— .browserslistrc
— .eslintrc.js
— .gitignore
— babel.config.js
— cypress.json
— jest.config.js
— package.json
— package-lock.json
— README.md
— tsconfig.json
Dossier node_modules :
Ce dossier contient toutes les dépendances nécessaires au fonctionnement de notre application, ainsi que toutes les bibliothèques JS installés et dont le projet a besoin pour son fonctionnement.
Dossier public :
Le dossier public contient tous les fichiers statiques, comme les fichiers CSS et les images ainsi que les fichiers média qui ne changent pas au fil du temps. Dans VueJS, le fichier index est situé dans le dossier public.
Le fichier favicon.ico est également situé dans ce dossier. Il correspond au logo qui s’affichera dans l’onglet du navigateur.
Dossier src :
src correspond au dossier source qui contient le code source de l’application.
Le sous-dossier assets contient tous les fichiers d’actifs requis par le code source, tels que les polices, les icônes, les images, les styles, etc…
Le dossier components contient tous les composants que nous codons pour créer l’application (dans notre exemple, il contient un composant appelé HelloWorld.vue). Outre les dossiers, il contient également des fichiers tels que App.vue et main.js.
Le dossier Router contient tous les fichiers de routing liés aux vues.
Le dossier store correspond aux fichiers liés à Vuex. Lorsque vous voulez séparer vos modules Vuex, vous devez stocker dans ce dossier l’état racine, les actions, les mutations et les getters et connecter automatiquement tous les modules Vuex à partir du répertoire des modules.
Le dossier views, c’est ici que nous stockons tous les points d’entrée des routes des applications. Par exemple, dans votre application, vous pouvez avoir les routes /home, /about, /orders. Respectivement, dans le dossier views, vous devriez avoir Home.vue, About.vue, Orders.vue.
Dossier tests :
Ce dossier contient tous les fichiers nécessaires pour la réalisation des tests. Dans cet exemple, le sous-dossier e2e correspond aux tests end-to-end tandis que le second sous-dossier nommé unit est dédié aux tests unitaires.
Le fichier gitignore :
Le fichier gitignore permet de préciser les fichiers et dossiers qui doivent être ignorés par le versioning de Git et qui ne doivent pas être poussés dans la branche courante. Généralement on y trouve le dossier node_modules car il contient de nombreux fichiers qui pourraient alourdir inutilement les performances de l’application, mais également d’autres fichiers qui proviennent de la machine et qui n’ont pas besoin d’être commité.
Le fichier package.json :
Il contient toutes les propriétés essentielles de l’application, telle que son nom, sa version, ainsi que les dépendances installés. Ce n’est pas spécifique à Vue, c’est lié à NodeJs, puisque chaque projet Vue créé en utilisant Vue-cli ou Vite est un projet Node.
dependencies et devDependencies contiennent un objet qui reflète le nom du paquet et le numéro de version. devDependencies contient les noms et les versions des paquets qui ne sont nécessaires que pendant la phase de développement, alors que dependencies est responsable de la production.
La partie scripts contient quant à elle, les clés et les valeurs correspondant aux alias et aux commandes pour l’exécution, le test et le build.
Le fichier package-lock.json :
package-lock.json est automatiquement généré pour toute opération où npm modifie l’arborescence node_modules ou package.json.
Il décrit l’arborescence exact qui a été généré, de sorte que les installations ultérieures puissent générer des arborescences identiques, indépendamment des mises à jour intermédiaires des dépendances.
Sources :
