# Création d'une application permettant d'initialiser des applications Vue.Js

Juliette Rousselet

<figure><img src="image_1.png" /></figure>

## To cite this version:

Juliette Rousselet. Création d'une application permettant d'initialiser des applications Vue.Js. Informatique et langage [cs.CL]. 2025. hal-05115264

HAL Id: hal-05115264

https://hal.inrae.fr/hal-05115264v1

Submitted on 16 Jun 2025

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_2.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# Création d'une application permettant d'initialiser des applications Vue.Js

Rapport de stage de 3ème année de BUT Informatique

10 février 2025 - 6 juin 2025
Remerciements

Je tiens tout d'abord à remercier toutes les personnes qui m'ont permis d'avoir
l'opportunité de faire mon stage à INRAE et qui ont fait de ces quatre mois un moment
agréable où j'ai pu beaucoup apprendre.

Je voudrais remercier toute l'équipe de l'unité de recherche Info&sols pour son
accueil chaleureux et son soutien constant. Leur collaboration et leurs conseils ont
grandement enrichi mon expérience et m'ont permis de développer de nouvelles compétences
dans un environnement stimulant.

J'aimerais remercier en particulier Alain Pickel, mon maître de stage, qui a donné de
son temps pour me guider et m'a beaucoup aidée tout au long de mon stage.

Je souhaite également remercier le personnel du département informatique de l'iut
d'Orléans pour m'avoir accueillie et formée pendant mes deux premières années ainsi que
mon tuteur universitaire, M. Dalaigre, qui m'a rendu visite pendant mon stage pour vérifier
son bon déroulement.

Je voudrais finalement remercier ma famille et mes camarades qui m'ont épaulée dans
la recherche de ce stage.
# Sommaire

<table><tr><td>Remerciements</td><td>2</td></tr><tr><td>Sommaire</td><td>3</td></tr><tr><td>Introduction</td><td>4</td></tr><tr><td>Entreprise</td><td>5</td></tr><tr><td>Environnement de travail</td><td>6</td></tr><tr><td>Mission de stage</td><td>7</td></tr><tr><td>Présentation du sujet</td><td>7</td></tr><tr><td>Analyse de la situation</td><td>8</td></tr><tr><td>Développement du backend</td><td>9</td></tr><tr><td>Modèle de données</td><td>10</td></tr><tr><td>Organisation du projet</td><td>11</td></tr><tr><td>Mise en place de l'API et création du fichier zip</td><td>12</td></tr><tr><td>Génération des fichiers à la racine du projet</td><td>13</td></tr><tr><td>Génération de l'arborescence : dossiers et structure du projet</td><td>14</td></tr><tr><td>Développement du frontend</td><td>15</td></tr><tr><td>Tâches annexes</td><td>17</td></tr><tr><td>Adaptation d'un script Python existant</td><td>17</td></tr><tr><td>Expérimentation de l'outil Windsurf et réflexion sur l'usage de l'IA</td><td>18</td></tr><tr><td>Présentation du travail à l'unité</td><td>19</td></tr><tr><td>Suite du projet</td><td>20</td></tr><tr><td>Bilans</td><td>21</td></tr><tr><td>Bilan humain</td><td>21</td></tr><tr><td>Bilan technique</td><td>22</td></tr><tr><td>Bilan général</td><td>23</td></tr><tr><td>Annexes</td><td>24</td></tr><tr><td>Annexe 1 : Démonstration de compétence 1 : Réaliser un développement d'application</td><td>24</td></tr><tr><td>Annexe 2 : Localisation du centre INRAE Val de Loire</td><td>25</td></tr><tr><td>Annexe 3 : Structure type des projets Vue.js</td><td>26</td></tr><tr><td>Annexe 4 : Liste détaillée des options</td><td>27</td></tr><tr><td>Annexe 5 : Captures d'écran de l'interface web</td><td>28</td></tr></table>
# Introduction

Dans le cadre de ma 3e année de formation à l'IUT Informatique d'Orléans, j'ai effectué un stage de 16 semaines au centre INRAE Val de Loire, du 10 février au 6 juin 2025. Ce stage avait pour objectif de mettre en application mes compétences techniques en environnement professionnel et de contribuer à un projet concret.

Dans le cadre d'une démarche engagée au sein du SI Sol visant à uniformiser les pratiques de développement et à faciliter la maintenance des applications, le besoin d'un outil permettant de générer de nouveaux projets conformes aux standards techniques de l'unité est apparu.

La mission qui m'a été confiée consistait donc à développer cette application, avec un backend Java/Spring Boot et un frontend JavaScript/Vue.js, tout en assurant la cohérence avec les frameworks et l'organisation des applications déjà existantes. Ce générateur devait permettre de créer rapidement des projets avec une architecture prédéfinie, des dépendances communes, une configuration initiale, ainsi que des options personnalisables pour répondre à différents cas d'usage.

À l'issue du stage, j'ai livré une application pleinement fonctionnelle répondant aux besoins identifiés. Certains objectifs complémentaires, tels qu'un prévisualiseur inspiré de l'application Spring Boot Initializr ou un template de page de connexion, n'ont toutefois pas été mis en œuvre, faute de temps.

Ce rapport présente tout d'abord l'entreprise et le contexte du stage, puis détaille la mission réalisée, avant de conclure par un bilan de cette expérience.
Entreprise

INRAE (Institut National de Recherche pour l'Agriculture, l'Alimentation et l'Environnement) est un institut public français créé en 2020, issu de la fusion de l'INRA et de l'IRSTEA. Il constitue le principal organisme européen dédié à la recherche sur l'agriculture, l'alimentation et l'environnement.

Sa mission principale est de produire des connaissances scientifiques, des innovations et des solutions pour répondre à des enjeux majeurs tels que le changement climatique, la sécurité alimentaire, la gestion durable des ressources naturelles et la transition écologique des systèmes agricoles et alimentaires.

INRAE est structuré en départements scientifiques et unités de recherche répartis sur l'ensemble du territoire français, regroupant plus de 12 000 collaborateurs, parmi lesquels chercheurs, ingénieurs et techniciens, organisés en 14 départements scientifiques, chacun dédié à un domaine de recherche spécifique.

Le site d'Orléans du centre INRAE Val de Loire, situé Avenue de la Pomme de Pin (voir Annexe 2 : Localisation du centre INRAE Val de Loire), est l'un des principaux sites de recherche de l'institut. Il concentre ses activités sur l'agroécologie, la viticulture, la gestion des ressources naturelles et la santé des écosystèmes.

J'ai effectué mon stage au sein de l'unité de recherche Info&Sols, spécialisée dans la gestion, la centralisation et la diffusion des données sur les sols en France. Cette unité joue un rôle essentiel dans l'évaluation des ressources pédologiques afin de soutenir des pratiques agricoles durables.

Elle porte notamment le projet SI Sol (Système d'Information sur les Sols), qui vise à structurer et rendre accessibles ces données à la communauté scientifique, aux acteurs publics et aux professionnels du secteur, via un ensemble d'applications et d'outils internes. L'unité met notamment en place des outils numériques facilitant la collecte, la structuration et la visualisation des données pédologiques, en lien avec les standards d'INRAE et les besoins des utilisateurs métiers. C'est dans ce contexte que s'inscrit la mission qui m'a été confiée.
## Environnement de travail

Pendant la durée de mon stage, j’étais dans un bureau avec deux collègues. On m’a fourni un ordinateur fixe sous une distribution Linux, équipé de 2 écrans, ainsi qu’un compte INRAE et une adresse mail. Ces outils, identiques à ceux que j’avais utilisés lors de mon stage précédent, ont facilité la phase d’adaptation.

Dès le début du stage, mon maître de stage m’a présenté un dépôt sur Forgemia, une plateforme interne d’INRAE basée sur Git et dotée d’une interface similaire à GitLab. Ce dépôt centralisait toutes les informations utiles au projet : objectifs, contraintes, etc. J’ai consigné dans ce dépôt, sous plusieurs issues, les résultats de l’analyse préalable ainsi que les évolutions apportées en cours de développement. J’ai ensuite créé des dépôts distincts pour le backend et le frontend de l’application.

Pour le développement, j’ai utilisé les environnements de développement IntelliJ IDEA (pour Java/Spring Boot) et WebStorm (Javascript/Vue.Js). J’ai également eu recours à SonarQube pour assurer la qualité du code.
# Mission de stage

## Présentation du sujet

Après m'avoir présenté les récentes évolutions au sein d'INRAE, M. Pickel m'a présenté le sujet du stage. Celui-ci s'inscrivait dans une démarche plus large menée par l'unité Info&Sols, visant à harmoniser les pratiques de développement et à renforcer la qualité et la maintenabilité des applications du Système d'Information sur les Sols (SI Sol).

Dans ce cadre, l'unité a entamé une réflexion pour définir un socle technique commun pour ses futurs développements applicatifs. Bien que ce travail soit toujours en cours, de grands axes ont déjà été dégagés : un backend basé sur Spring Boot et un frontend réalisé avec Vue.js 3. Les bonnes pratiques associées à ce socle restent elles aussi en cours de définition et incluent notamment l'utilisation de tests automatisés, la documentation systématique des projets et le respect d'une organisation de code cohérente.

Cependant, jusqu'à présent, la phase d'initialisation des projets Vue.js restait hétérogène et manuelle. Si des outils comme vue create permettent de créer un squelette d'application Vue.js, ceux-ci restent insuffisants : les options proposées sont limitées (pas de choix de framework CSS, client HTTP, configuration de SonarQube, etc.), et l'organisation des fichiers ou l'intégration des standards graphiques de l'unité ne sont pas garantis.

C'est dans ce contexte qu'a émergé le besoin de disposer d'une application dédiée permettant d'initialiser automatiquement un projet Vue.js conforme aux standards de l'unité et à la charte graphique d'INRAE. Mon stage avait donc pour objectif de concevoir et développer une application web, avec une interface graphique simple et ergonomique, permettant de générer un projet complet basé sur Vue.js, à l'aide d'un backend Spring Boot chargé de composer dynamiquement les fichiers et de fournir une archive téléchargeable. Celle-ci devait permettre aux développeurs de sélectionner différentes options de configuration (présence et choix d'un framework CSS, d'un routeur, d'un framework de tests end-to-end, ajout de Vitest, etc.), et de générer un projet complet prêt à l'emploi.

Lors de la présentation du sujet, M.Pickel m'a également indiqué qu'une interface relativement simple était attendue pour cet outil, me montrant comme référence le site Spring Boot Initializr. Un formulaire clair permettant de sélectionner les différentes options de configuration était jugé suffisant pour répondre aux besoins des développeurs. Certains objectifs complémentaires, comme l'ajout d'une fonctionnalité de prévisualisation du projet ou l'inclusion automatique d'une page de connexion standardisée, avaient également été évoqués dès le départ comme des extensions possibles si le temps le permettait.

Au-delà du gain de temps pour les développeurs, l'outil visait aussi à uniformiser l'organisation des projets et des dépendances, facilitant ainsi la maintenance des applications dans la durée, et simplifiant leur transmission d'un développeur à un autre, notamment dans le cadre de départs.
Analyse de la situation

Les deux premières semaines de mon stage ont été essentiellement consacrées à la
phase d'analyse. Celle-ci avait pour objectif de dégager les besoins réels des utilisateurs (les
développeurs de l'unité), de comprendre les pratiques en place dans les projets existants, et
d'identifier les frameworks et structures à intégrer en priorité dans l'outil.

J'ai tout d'abord procédé à une exploration systématique des dépôts de code des applications existantes de l'unité. Pour chaque projet, j'ai relevé la version de Vue.js utilisée, les dépendances principales, ainsi que l'organisation du code. Cette analyse m'a permis d'identifier les points communs entre les projets ainsi que certaines divergences.

En parallèle, j'ai mené une analyse des outils d'initialisation existants, en générant de
nombreux projets à l'aide de vue create, puis en comparant les structures obtenues avec celles
des applications internes. Cette démarche a mis en lumière les limites de ces outils par
rapport aux besoins spécifiques de l'unité.

Enfin, j'ai consulté les documentations officielles des principaux frameworks identifiés (Vue Router, Pinia, Cypress, Vuetify, Axios, etc.) afin d'identifier les bonnes pratiques recommandées, tant en matière de configuration que d'organisation du code.

À l'issue de cette phase, plusieurs constantes ont émergé :

* une structure générale des projets Vue.js comprenant, dans la majorité des cas, les dossiers public, src, components, views, assets, plugins, et le cas échéant, router, store, cypress, e2e, tests, styles (voir Annexe 3 : Structure type des projets Vue.js)

* un ensemble de frameworks régulièrement utilisés par les développeurs de l'unité ;

* des variations d'organisation sur certains points (organisation des tests, etc), qui soulignent l'intérêt d'un outil garantissant une structure homogène

Cette étude m'a ainsi permis d'établir une liste de dépendances prioritaires, de même qu'un ensemble de structures conditionnelles à générer en fonction des options sélectionnées (par exemple, le dossier router uniquement si l'utilisateur active Vue Router).

Ces constats ont également servi de base à la définition des options de configuration proposées par l'application, ainsi qu'à l'élaboration d'une première version de l'arborescence cible.

Cette phase d'analyse a donc permis de poser des fondations solides au projet et de guider le démarrage du développement du backend, avec pour premier objectif de tester la génération automatisée de projets conformes aux standards identifiés.
Développement du backend

Le développement du backend a occupé la partie centrale de mon stage. Il avait pour objectif de permettre la génération automatisée du squelette d'un projet Vue.js selon les standards identifiés durant la phase d'analyse, en tenant compte des options choisies par l'utilisateur. Ce backend a été réalisé en Java avec Spring Boot, et conçu dès le départ pour fonctionner en lien étroit avec le frontend, développé ultérieurement. Cette architecture a été pensée pour garantir modularité, maintenabilité et évolutivité, en facilitant notamment l'ajout futur de nouvelles options ou la modification des templates existants.

Afin de garder une trace des versions principales, j'ai mis en place un fichier CHANGELOG.md. J'ai également créé un fichier README.md documentant le fonctionnement général de l'application ainsi que les différentes options disponibles avec des explications sur leur rôle et leur usage. La liste détaillée des options est présentée en annexe (voir Annexe 4 : Liste détaillée des options). Pour chaque option, on y trouve une description, les valeurs possibles et la valeur par défaut.
## Modèle de données

Afin de gérer les options sélectionnées par l'utilisateur, j'ai mis en place un modèle simple qui encapsule l'ensemble des paramètres de configuration nécessaires à la génération du projet : frameworks à inclure (Vue Router, Pinia...), choix du framework de test, nom du projet, description, etc. Ce modèle de données est central dans la communication entre frontend et backend, permettant de garantir la cohérence et la validité des choix utilisateurs. En effet, lorsque le contrôleur reçoit le json envoyé par le frontend, il sert immédiatement à remplir le model. Le model est également nettoyé, c'est-à-dire que toutes les valeurs manquantes ou incorrectes vont être remplacées par des valeurs par défaut. Ce nettoyage assure une robustesse accrue du backend face aux erreurs de saisie, notamment lorsque l'on utilise la commande curl au lieu du frontend. Cette base permet ainsi l'ajout et la suppression d'options assez facilement.
## Organisation du projet

L'organisation du projet backend a été soigneusement pensée pour rester lisible et évolutive malgré le nombre important de classes. J'ai structuré le code en différents packages correspondant à leur rôle :

* controller : définit les endpoints de l'API, gère la validation des entrées, et renvoie les réponses HTTP adaptées

* service : implémente la logique de génération des fichiers et dossiers, répartie en sous-packages qui reflètent la structure d'un projet Vue.js (src, public, cypress, racine)

* exception : contient des classes d'exceptions personnalisées, utilisées pour remonter les erreurs métier au contrôleur avec des messages clairs

* model : contient la classe qui stocke les options du projet

* constants : centralise les chaînes constantes utilisées (noms de fichiers, chemins, options, etc)

Le dossier service a lui-même été organisé selon la structure d'un projet Vue.js : des sous-packages correspondent aux éléments src, public, cypress, ou encore aux fichiers à la racine. Cette même logique a été appliquée aux tests, facilitant grandement leur compréhension et leur maintenance. Cette organisation des services a toutefois été mise en place en cours de développement, face à la complexité croissante du projet.

J'ai également mis en place des interfaces afin que les services soient cohérents entre eux et que l'on sache ce qui est attendu d'eux. J'ai donc une interface pour les classes qui génèrent des fichiers, celles qui génèrent des dossiers, celles qui génèrent des images, les TemplateEngineFactories, le service qui crée le projet à la racine et le service qui va s'occuper de récupérer les versions des différentes dépendances.

Les templates sont quant à eux stockés dans le dossier templates du dossier resources généré par défaut quand on crée un projet avec Spring Boot Initializr. Ceux-ci exploitent le moteur de template Thymeleaf. J'ai conçu des factories spécifiques chargées de paramétrer les Template Engine pour des fichiers textes, HTML ou JavaScript qui permettent ensuite de charger ces templates. Le dossier templates n'a cependant pas été structuré comme les services, car une telle organisation aurait nécessité une refonte des TemplateEngineFactories, dont le coût n'était pas justifié au regard du bénéfice attendu. Des noms explicites permettent néanmoins d'assurer la clarté du code.
## Mise en place de l'API et création du fichier zip

Le développement a débuté par la mise en place de l'API principale accessible via le point d'entrée /api/create. Celle-ci a été élaborée avec l'aide de mon maître de stage, ce qui m'a permis de me familiariser progressivement avec les fondamentaux de Spring Boot (structure des contrôleurs, injection de dépendances, gestion des routes...). Elle est basée sur un contrôleur Spring annoté avec @RestController, et utilise le mécanisme d'injection de dépendances de Spring (@Autowired) pour intégrer les services métiers. Par exemple, la méthode principale createProject reçoit un objet JSON contenant les options utilisateur, le convertit en objet Java grâce à Jackson, puis transmet ce modèle aux services chargés de la génération.

L'objectif de cette API était de recevoir en entrée les options de configuration choisies par l'utilisateur, et de retourner en réponse un projet Vue.js généré automatiquement sous forme d'archive compressée (zip).

Pour cela, j'ai conçu une classe utilitaire ZipUtils chargée de parcourir un dossier temporaire dans lequel sont regroupés tous les fichiers générés, puis de créer un fichier zip à partir de ce dossier. Une fois l'archive créée, ce répertoire est supprimé automatiquement, afin de ne pas encombrer le système. J'ai également veillé à gérer proprement les exceptions (ex : IOException) pour éviter les corruptions de fichier ou les fuites de ressources.
## Génération des fichiers à la racine du projet

Une fois l'API fonctionnelle, j'ai commencé la génération du fichier package.json. Cette étape, qui a pris un peu moins de 20 jours, m'a permis d'approfondir mes réflexions sur les dépendances à inclure selon les options choisies, leur classification entre dependencies et devDependencies, ainsi que la définition des scripts npm associés en fonction de chaque option. Pour cela, j'ai implémenté une classe JsonPackageService qui construit dynamiquement le fichier package.json en fonction des options utilisateur, triant soigneusement les dépendances en dependencies ou devDependencies, et configurant les scripts npm en fonction des frameworks et outils choisis.

Une fois ce fichier finalisé, j'ai produit une première version de l'outil, déposée dans le dépôt Git de l'unité sous le numéro de version 0.1.0.

J'ai ensuite enchaîné avec la génération des fichiers racines d'un projet Vue.js standard : .gitignore, README.md, CHANGELOG.md, vite.config.js, jsconfig.json, index.html, eslint.config.js, etc. Pour cela, j'ai utilisé des templates Thymeleaf et développé un utilitaire chargé du rendu de fichiers texte, HTML ou JavaScript. Chaque fichier possède une classe dédiée qui définit son nom, son chemin, et son contenu à partir du modèle. Cette approche orientée objet pour la génération des fichiers a permis d'assurer une grande flexibilité et de limiter les duplications de code.
## Génération de l'arborescence : dossiers et structure du projet

Après les fichiers à la racine, j'ai poursuivi avec la génération du dossier public, en y incluant notamment le fichier icon.ico représentant le logo d'INRAE, en conformité avec la charte graphique de l'établissement.

La gestion de ce logo a été plus compliquée que prévue car il devait être considéré comme un fichier mais cela a posé problème. En effet, un générateur de fichier, selon l'interface, doit avoir une fonction pour générer le contenu et une autre pour l'enregistrer dans le dossier temporaire sous le bon nom et au bon endroit. La gestion de ce fichier image a nécessité la création d'une nouvelle interface spécifique aux images, car le système initial de génération basé sur des chaînes de caractères ne permettait pas un traitement correct des fichiers binaires. Cette interface demande aux classes une méthode pour copier une image depuis un répertoire source (le dossier resources/images du projet) dans un répertoire destination (le dossier temporaire) à la manière de la commande cp dans le terminal.

J'ai ensuite progressivement implémenté la génération des autres dossiers structurants, en commençant par les plus simples (cypress, tests, etc) pour finir par src, le plus complexe car fortement dépendant des options sélectionnées et contenant de nombreux enfants.

La génération conditionnelle repose sur un système d'arborescence où chaque dossier « parent » décide d'inclure ou non ses sous-éléments selon les options activées. Par exemple, si Pinia est sélectionné, le dossier store est créé dans src, sinon il est ignoré. De même, si Yarn est choisi, le fichier .yarnrc.yml est créé, et ignoré autrement. Cette approche évite la génération de fichiers inutiles, regroupe le choix des fichiers à ajouter et garde la structure propre, permettant notamment d'avoir une interface plus simple avec un fonctionnement par défaut.

Le contenu du dossier src est particulièrement modulaire : il peut contenir les dossiers components, views, store, router, assets ou plugins selon les choix de l'utilisateur. L'architecture souple et extensible que j'ai mise en place permet donc d'ajouter ou modifier facilement ces éléments par la suite. Cette architecture a permis d'anticiper l'intégration future de fonctionnalités supplémentaires, tout en garantissant la conformité aux standards définis par l'unité.
# Développement du frontend

Le développement du frontend a représenté une part plus restreinte de mon stage, puisqu'une grande partie de la logique métier était prise en charge par le backend. Son rôle principal était de fournir une interface utilisateur claire et fonctionnelle, permettant de remplir un formulaire de configuration et d'envoyer les données correspondantes à l'API du backend vers l'endpoint /api/create. Cela incluait également une validation minimale, car celle-ci était principalement assurée côté backend.

J'ai dans un premier temps tenté de concevoir seule une interface agréable, mais j'ai eu des difficultés à concevoir un site à la fois esthétique et ergonomique car c'est un sujet peu abordé lors de la formation du BUT et qui ne m'est pas familier. J'ai donc bénéficié de l'aide précieuse de Mme Varloteaux, collègue également présente dans le service informatique, qui m'a proposé une maquette graphique. Cette maquette m'a permis de repenser l'apparence du site et de repartir sur une base visuelle plus cohérente.

Le frontend a été développé en utilisant les classes Bootstrap, ce qui m'a permis de structurer rapidement une interface réactive et propre. Le formulaire est divisé en quatre étapes :

* Généralités

* JavaScript

* Qualité du code

* Frameworks nécessaires

Chaque étape regroupe des champs spécifiques. La navigation entre les parties se fait à l'aide de boutons "Suivant" et "Précédent", mais aussi via une barre de progression latérale cliquable. L'objectif de cette organisation était de ne pas surcharger l'utilisateur avec trop d'informations sur une seule page.

Parmi les éléments de formulaire :

* Le nom de l'application (appName) est le seul champ obligatoire.

* Le champ dirName, qui correspond au nom du dossier de sortie, se voit automatiquement attribuer un placeholder basé sur une version simplifiée de appName, placeholder qui sera utilisé comme nom de dossier par défaut par le backend si l'utilisateur ne remplit pas ce champ.

* La licence peut être choisie dans une liste prédéfinie (MIT, Apache, etc.), mais un champ libre s'affiche si l'on sélectionne "Autre". Il est facile de modifier les options disponibles car il suffit d'ajouter ou retirer le nom de la licence dans une liste.

* J'ai commencé à réfléchir à la manière de réaliser une prévisualisation du contenu du projet en fonction des options sélectionnées, mais il ne me restait plus assez de temps pour obtenir un rendu fonctionnel à la fin du stage. Ce prototype de prévisualisation reste donc à l'état de piste de développement futur, l'avantage étant que cette
fonctionnalité ne nécessite pas ou peu la modification du backend car il serait possible
de faire la même requête sans télécharger le zip reçu mais en l'affichant à la place.

* Je n'ai pas eu le temps de travailler sur un template de page de connexion, cette fonctionnalité étant secondaire par rapport à l'objectif principal du projet, elle a été laissée de côté. Si elle devait être ajoutée, elle pourrait prendre la forme d'une page supplémentaire du formulaire, avec une liste de composants similaires, par exemple une page d'inscription.

Plusieurs captures d'écran de l'interface finale ont été ajoutées en annexe (voir Annexe 5 : Captures d'écran de l'interface web), illustrant les différentes étapes du formulaire et l'apparence générale du site.

On peut voir sur la gauche une barre montrant l'étape où se situe actuellement
l'utilisateur avec laquelle il peut interagir pour passer plus rapidement d'une page à une autre.

En bas sont les boutons permettant de passer à la page précédente ou suivante. Le bouton “Précédent” n’est pas visible sur la première page et le bouton “Suivant” est remplacé par celui pour créer sur la dernière page. Il est possible d’avancer et reculer pour modifier les champs à sa guise dans les pages du formulaire.

Lorsque l'on appuie sur le bouton “Créer”, il change de couleur et devient non-cliquable le temps de la création et du téléchagent du projet afin de signaler à l'utilisateur que sa demande à bien été prise en compte et empêchant également les requêtes multiples simultanées.

Dans le cas où l'utilisateur n'aurait pas rempli le nom de l'application, une pop up s'affiche indiquant le problème et l'interface retourne sur la page contenant le champ correspondant à celui-ci.

Lorsque l'on sélectionne oui pour une fonctionnalité, la partie demandant le framework à utiliser s'affiche dynamiquement, ce qui permet de ne pas surcharger l'interface dans le cas où l'utilisateur souhaite un projet simple.

Certaines options telles que Vitest et Eslint sont à oui par défaut. En effet, bien que voulant laisser la liberté au développeur de ne pas choisir ces options, potentiellement pour choisir quelque chose qui n'est pas disponible dans l'initialiseur, le but est de pousser les développeurs à utiliser ces outils par souci d'uniformisation et pour suivre les pratiques décidées par l'unité.
# Tâches annexes

En parallèle de mes missions principales sur le backend et le frontend, j'ai également participé à deux tâches annexes qui m'ont permis d'élargir le spectre de mes activités pendant le stage.

## Adaptation d'un script Python existant

Le script Python développé lors de mon stage de BUT 2 était utilisé pour interagir avec une base de données de l'unité. Cependant, la structure de cette base ayant légèrement évolué, il devenait nécessaire d'ajuster le script en conséquence. Mon maître de stage m'a confié cette mission en particulier parce que je connaissais déjà ce script, ayant travaillé dessus l'an dernier, ce qui me rendait plus apte à le comprendre rapidement que quelqu'un qui ne l'aurait jamais vu.

L'objectif était à la fois de corriger le fonctionnement du script pour qu'il soit de nouveau compatible avec la base actuelle, et de tester sa flexibilité, c'est-à-dire vérifier s'il était facilement modifiable pour suivre l'évolution de la structure des données. Cette tâche m'a permis de constater que la logique globale du script était bien construite et les ajustements ont pu être réalisés sans restructuration lourde.
## Expérimentation de l'outil Windsurf et réflexion sur l'usage de l'IA

L'unité s'intéresse actuellement à l'intelligence artificielle et à comment l'intégrer, de façon pertinente, dans ses pratiques de travail. Dans ce cadre, des jetons d'accès à l'outil Windsurf ont été obtenus afin de tester ses capacités. J'ai participé à cette phase d'expérimentation en collaboration avec mon maître de stage, en soumettant diverses tâches à l'outil pour en évaluer les performances.

Il est ressorti de ces essais que, bien que l'outil possède un certain potentiel, il présente encore de nombreuses limites : il lui arrive de modifier des éléments qui ne sont pas liés à la demande initiale, ou encore de tourner en rond dans une requête, par exemple quand je lui demande de modifier un pattern dans une partie du code uniquement et qu'il en modifie à d'autres endroits, puis que je lui demande de reprendre la version originale seulement dans les endroits non concernés et qui modifie tout de nouveau. De même, lorsque je lui avais simplement demandé de transformer des constantes en des templates Thymeleaf, des modifications dans le texte même ont été effectuées. En revanche, le Copilot intégré de l'outil est beaucoup plus agréable et fluide à utiliser, notamment pour l'assistance au développement.

Les résultats de cette expérimentation ont été mis en commun lors de plusieurs réunions, regroupant les membres du service informatique mais aussi d'autres agents de l'unité intéressés par ces problématiques. La réflexion est toujours en cours, notamment concernant l'intérêt de renouveler ou non l'acquisition de jetons pour Windsurf, en fonction de l'évolution des besoins et des fonctionnalités offertes par l'outil.
Présentation du travail à l'unité

Comme l'année précédente, j'ai eu l'opportunité de présenter le travail réalisé pendant mon stage aux membres du service informatique du Si Sol, à l'occasion d'une réunion organisée en fin de stage. Cette présentation avait un double objectif : expliquer le fonctionnement de l'outil que j'ai développé, et permettre aux membres du service, qui seront les principaux utilisateurs, de poser des questions et de proposer des suggestions pour d'éventuelles améliorations dans le court temps restant avant la fin de mon stage.

Lors de la présentation, j'ai d'abord exposé le contexte du besoin, en expliquant pourquoi des outils existants comme create-vue ne répondaient pas complètement aux attentes de l'unité : choix d'options trop restreint, absence de personnalisation graphique selon la charte INRAE, ou encore manque de visibilité sur la structure du projet généré avant téléchargement.

J'ai ensuite présenté l'application en elle-même, avec une démonstration en direct de son fonctionnement. J'ai remercié Mme Varloteaux pour son travail sur la maquette, et précisé que certains aspects de l'interface actuelle (notamment le CSS ou les intitulés de sections comme "Carte") étaient encore en cours d'ajustement. En effet, au moment de la présentation, le frontend venait tout juste d'être fonctionnel, donc tout n'était pas terminé ce qui incluait le nom des champs qui n'était pas encore toujours très explicites. C'était par exemple le cas pour "Carte", plus tard changé en "Souhaitez-vous pouvoir afficher des cartes ?" pour plus de clarté.

J'ai également souligné que, même si aucun champ n'était encore défini comme obligatoire, cela allait être modifié. Quoi qu'il en soit, tous disposaient déjà d'une valeur par défaut, garantissant un fonctionnement complet. Les champs booléens, quant à eux, étaient définis par défaut à "non", car la réflexion sur les éléments que l'on souhaitait véritablement inciter à utiliser n'était pas encore finalisée.

Enfin, j'ai présenté le fonctionnement du backend, en détaillant l'organisation des répertoires et fichiers, en particulier la gestion des templates. J'ai expliqué pourquoi je n'avais pas organisé les fichiers de templates comme les fichiers finaux (c'est-à-dire selon la structure d'un projet Vue.js généré), car cela aurait nécessité de modifier en profondeur le système de génération (template factories), ce qui aurait été trop coûteux en temps pour un bénéfice limité.

Cette présentation m'a permis non seulement d'entraîner mes compétences de vulgarisation technique devant un public majoritairement technique, mais aussi de recueillir des remarques utiles pour ajuster l'outil en fonction des attentes réelles des futurs utilisateurs.
Suite du projet

Les retours obtenus à l'issue de cette présentation ont été enrichissants et m'ont
ouvert des perspectives sur l'évolution possible du projet.

Plusieurs pistes d'amélioration ont été évoquées, notamment l'ajout d'un système de prévisualisation du projet généré, permettant à l'utilisateur de voir les fichiers créés avant le téléchargement. Il a également été question d'intégrer une page de connexion pour sécuriser l'accès à certaines fonctionnalités, ou encore d'améliorer l'interface utilisateur pour la rendre plus intuitive.

Ces idées ouvrent la voie à de futures évolutions du projet, que ce soit dans un cadre de stage, d'alternance ou même en tant que contribution libre à l'outil.

Le projet devrait normalement être repris par M. Pickel sur des temps moins chargés afin de permettre l'évolution de l'application voire l'ajout des fonctionnalités complémentaires.
# Bilans

## Bilan humain

Dès mon arrivée, j'ai retrouvé avec plaisir l'ambiance bienveillante et stimulante d'INRAE. L'accueil a été chaleureux, et j'ai rapidement repris mes marques au sein de l'équipe. L'environnement de travail était propice à l'échange, à la concentration, mais aussi à l'autonomie, ce qui m'a permis d'évoluer dans des conditions idéales.

Tout au long de mon stage, j'ai pu bénéficier d'une grande confiance de la part de mon encadrant, ce qui m'a encouragée à proposer mes idées et à faire des choix techniques lorsque cela s'y prêtait. Cette liberté d'initiative m'a permis de progresser et de mieux comprendre comment adapter mes connaissances aux besoins réels.

Les échanges réguliers avec Alain Pickel m'ont beaucoup apporté : il était toujours disponible pour m'aiguiller, tout en me laissant le temps d'explorer des pistes par moi-même. Ce dialogue constant a joué un rôle important dans ma progression, notamment quand il s'agissait d'arbitrer entre plusieurs solutions techniques.

J'ai aussi eu l'occasion de présenter mon travail au reste de l'unité, ce qui a été une très bonne expérience. Préparer cette présentation m'a permis de structurer mes idées et de réfléchir à la manière de rendre le projet clair pour des personnes issues d'horizons différents, bien que majoritairement technique. J'ai pris soin d'adapter mon discours en fonction du public, en expliquant les points techniques tout en conservant une vue d'ensemble accessible. Les retours obtenus à l'issue de cette présentation ont été enrichissants et m'ont ouvert des perspectives sur l'évolution possible du projet.
## Bilan technique

Ce stage m'a permis de mettre en pratique et de consolider mes compétences en développement web fullstack, à travers un projet structuré mêlant Spring Boot pour le backend et Vue.js pour le frontend. J'ai pu appliquer les bonnes pratiques apprises à l'IUT tout en les adaptant aux exigences d'un véritable besoin métier.

L'organisation du backend m'a notamment permis de réfléchir à une architecture claire et modulaire. J'ai structuré le code en couches ( constantes, contrôleurs, services, gestion des erreurs...) pour favoriser la lisibilité et la maintenabilité du projet. Cette approche m'a aidée à mieux comprendre la logique de séparation des responsabilités, essentielle dans des projets de plus grande envergure.

L'un des défis techniques importants a été la gestion dynamique des templates en fonction des options sélectionnées. Cela m'a permis d'approfondir mes connaissances en manipulation de fichiers, en génération de contenu, ainsi qu'en sérialisation côté Java. J'ai appris à faire des choix de conception réalistes, par exemple en ne structurant pas les templates comme les fichiers finaux pour éviter de modifier les systèmes de génération existants sans réel gain.

Côté frontend, même si la partie visuelle n'était pas ma priorité principale, j'ai tout de même veillé à rendre l'interface fonctionnelle, lisible et extensible. J'ai aussi pu identifier certaines limites dans l'UX, ce qui a nourri des réflexions pour de futures évolutions (prévisualisation, champs obligatoires, reformulation des intitulés...).

En parallèle, j'ai renforcé mes compétences en gestion de version avec Git et GitLab (Forgemia). J'ai appris à organiser mon travail de manière plus rigoureuse, avec des commits fréquents, des branches bien nommées, et l'usage de tags de version pour suivre les évolutions. Ces bonnes pratiques sont précieuses pour la collaboration en équipe et la traçabilité du code.

Enfin, j'ai détaillé les étapes d'installation, les commandes, les options disponibles, etc, en me mettant à la place d'un développeur ou d'un utilisateur reprenant l'outil après moi. J'ai ainsi dû réfléchir à ce dont un développeur pourrait avoir besoin afin de reprendre mon projet efficacement et aux questions qui pourraient se poser.

Ce stage a donc représenté une véritable mise en situation professionnelle, qui m'a permis de relier des savoirs théoriques à un besoin concret, et de développer mon autonomie dans toutes les étapes d'un projet informatique, du cadrage à la livraison.
## Bilan général

Ce stage m'a offert l'opportunité de mener un projet web fullstack de bout en bout, avec une forte autonomie dans les choix techniques et fonctionnels. À travers le développement de cet outil de génération de projets Vue.js, j'ai pu m'impliquer dans une démarche complète, allant de la compréhension du besoin jusqu'à la présentation du résultat final à l'unité.

L'application était entièrement fonctionnelle à la fin de mon stage, et toutes les fonctionnalités prévues initialement étaient implémentées. Même si certains éléments optionnels n'avaient pas encore été ajoutés, comme la prévisualisation du projet généré ou une page de connexion pour restreindre l'accès, l'outil remplissait déjà son objectif principal. Il permettait de générer des projets Vue.js cohérents, personnalisés selon les choix de l'utilisateur, et prêts à être utilisés. Cela représente une base solide pour une future mise en production ou pour d'éventuelles évolutions.

Travailler dans un environnement professionnel où mes propositions étaient écoutées et où j'avais la liberté de tester des idées a été particulièrement formateur. Cela m'a aidée à développer ma capacité à prendre des décisions techniques tout en tenant compte des contraintes de temps, d'ergonomie et de maintenabilité.

Ce stage m'a également permis de confirmer mon attrait pour le développement logiciel et plus particulièrement pour la conception d'outils utiles à d'autres développeurs. J'ai apprécié travailler sur un projet qui visait à simplifier et accélérer le démarrage d'autres projets Vue.js, en intégrant des choix techniques cohérents et une personnalisation conforme à la charte graphique d'INRAE. Cela m'a également forcé à me renseigner sur le fonctionnement et l'organisation des projets Vue.js ce qui a grandement enrichi mes connaissances sur celui-ci. Apprentissage renforcé par la mise en pratique dans la création du frontend.

Enfin, cette expérience m'a confortée dans mes choix d'études, en me donnant une vision concrète du métier de développeur fullstack. Elle me pousse, en effet, à poursuivre dans cette voie et m'a permis de mieux cerner les compétences que je souhaite continuer à développer, notamment en backend, en architecture logicielle, et en conception d'outils internes.

Je repars donc avec une expérience solide, des compétences renforcées, et une motivation accrue pour poursuivre dans cette voie. Je suis reconnaissante envers INRAE et le service informatique du Si Sol pour m'avoir permis de vivre ce stage dans des conditions aussi favorables à l'apprentissage et à l'épanouissement professionnel.
# Annexes

## Annexe 1 : Démonstration de compétence 1 : Réaliser un développement d'application

Dès le début de mon stage, mon tuteur m'a présenté les grandes lignes du projet : développer un outil de génération de projets Vue.js personnalisés, similaire à create-vue ou Spring Initializr, mais mieux adapté aux besoins de l'unité. Nous avons ensuite échangé régulièrement pour ajuster les priorités, clarifier certains choix techniques et s'assurer que le projet évoluait dans la bonne direction. Cette collaboration m'a permis de mieux cerner les attentes, de faire des propositions, et de prendre des décisions de conception de manière autonome tout en restant alignée avec les besoins du service.

Le développement s'est organisé en deux grandes parties : un frontend interactif en Vue.js qui permettait à l'utilisateur de sélectionner des options (comme l'utilisation de Leaflet ou la présence de tests), et un backend en Spring Boot chargé de transformer ces choix en un projet fonctionnel zippé. Pour structurer correctement le projet, j'ai mis en œuvre les bonnes pratiques apprises à l'IUT, comme le découpage clair en composants côté frontend et l'organisation par couches dans le backend (services, contrôleurs, exceptions, constantes...). L'ensemble du code est versionné sur Forgemia, avec des commits réguliers, propres, et organisés selon les fonctionnalités ajoutées.

L'application génère un projet Vue.js complet, structuré et directement utilisable, ce qui répond aux attentes exprimées en début de stage. J'ai également veillé à proposer une interface accessible et claire, en collaboration avec Mme Varloteaux pour la maquette. Certaines améliorations ont été prévues pour la suite (prévisualisation du projet, ajout d'une page de connexion, meilleure personnalisation visuelle), mais l'outil est déjà fonctionnel et exploitable, et constitue une base stable pour de futures évolutions.

Enfin, j'ai pris soin de tester l'application manuellement à chaque ajout de fonctionnalité, du backend (génération des projets et vérification des fichiers produits). J'ai aussi travaillé à la rédaction d'une documentation du fonctionnement global du projet, à destination des futurs développeurs, pour faciliter la compréhension, la maintenance et les ajouts futurs.

Ce stage m'a donc permis de concevoir et réaliser une application complète et fonctionnelle, à partir d'un besoin exprimé, tout en respectant les pratiques professionnelles et en prenant en compte l'ensemble du cycle de développement.
<figure><img src="image_3.png" /><figcaption>Annexe 2 : Localisation du centre INRAE Val de Loire</figcaption></figure>
Annexe 3 : Structure type des projets Vue.js

...  
| -- cypress  
| -- e2e  
| -- fixtures  
| -- support  
| -- public  
| -- docker  
| -- src  
| | -- assets  
| | -- components  
| | -- views/pages  
| | -- router  
| | -- store/stores  
| | -- style/styles  
| | -- layouts  
| | -- plugins  
| | -- App.vue  
| | -- main.js  
| -- tests  
| | -- unit  
| -- package.json  
| -- .gitignore  
| -- eslint.config.js  
| -- index.html  
| -- README.md  
| -- vite.config.js  
| -- vitest.config.js  
...
Annexe 4 : Liste détaillée des options

## Liste complète des options

<table><thead><tr><td>Option</td><td>Description</td><td>Valeur par défaut</td><td>Valeurs possibles</td></tr></thead><tbody><tr><td>`appName`</td><td>Nom de l'application</td><td>`"Application"`</td><td>`*Texte Libre*`</td></tr><tr><td>`author`</td><td>Nom de l'auteur</td><td>`*Aucune*`</td><td>`*Texte Libre*`</td></tr><tr><td>`changelog`</td><td>Inclure un changelog</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'cssFramework'`</td><td>Utiliser un framework CSS</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'cssFrameworkLibrary'`</td><td>Framework CSS à utiliser</td><td>`"bootstrap"`</td><td>`"bootstrap", "buefy", "bulma", "vuetify"`</td></tr><tr><td>`'dateManager'`</td><td>Utiliser un gestionnaire de dates</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'dateManagerLibrary'`</td><td>Librairie de gestion des dates</td><td>`"moment"`</td><td>`"moment"`</td></tr><tr><td>`'datePicker'`</td><td>Utiliser un date picker</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'datePickerLibrary'`</td><td>Librairie de date picker</td><td>`"vueDatePicker"`</td><td>`"vueDatePicker"`</td></tr><tr><td>`'description'`</td><td>Description de l'application</td><td>`"Une application avec Vue.Js et Vite"`</td><td>`*Texte Libre*`</td></tr><tr><td>`'dirName'`</td><td>Nom du dossier de sortie</td><td>`appName simplifié`</td><td>`*Texte Libre*`</td></tr><tr><td>`'e2e'`</td><td>Utiliser un outil de tests end-to-end</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'e2eLibrary'`</td><td>Librairie de tests e2e</td><td>`"cypress"`</td><td>`"cypress", "nightwatch", "playwright"`</td></tr><tr><td>`'eslint'`</td><td>Utiliser ESLint</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'httpClient'`</td><td>Client HTTP à utiliser</td><td>`"fetch"`</td><td>`"fetch", "axios"`</td></tr><tr><td>`'indent'`</td><td>Nombre d'espaces pour l'indentation</td><td>`'2'`</td><td>Nombre entier ≥ 0</td></tr><tr><td>`'javascriptInterpreter'`</td><td>Type d'interpréteur JavaScript</td><td>`"module"`</td><td>`"module", "commonjs"`</td></tr><tr><td>`'ifsx'`</td><td>Support de JSX</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'license'`</td><td>Licence du projet</td><td>`*Aucune*`</td><td>`*Texte Libre*`</td></tr><tr><td>`'map'`</td><td>Utiliser un framework de cartes</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'mapLibrary'`</td><td>Librairie de carte</td><td>`"leaflet"`</td><td>`"leaflet", "openStreetMap"`</td></tr><tr><td>`'packageManager'`</td><td>Gestionnaire de paquets à utiliser</td><td>`"rpm"`</td><td>`"rpm", "pnpm", "yarn", "bun"`</td></tr><tr><td>`'prettier'`</td><td>Utiliser Prettier</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'router'`</td><td>Utiliser un routeur</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'routerLibrary'`</td><td>Librairie de routage</td><td>`"vueRouter"`</td><td>`"vueRouter"`</td></tr><tr><td>`'runCommands'`</td><td>Exécuter les commandes après génération</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'semVer'`</td><td>Utiliser le versionnement sémantique</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'sonarQube'`</td><td>Intégrer SonarQube</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'storeManager'`</td><td>Utiliser un gestionnaire d'état</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'storeManagerLibrary'`</td><td>Librairie de gestion d'état</td><td>`"pinia"`</td><td>`"pinia"`</td></tr><tr><td>`'typescript'`</td><td>Utiliser TypeScript</td><td>`'false'`</td><td>`'true', 'false'`</td></tr><tr><td>`'vitest'`</td><td>Utiliser Vitest pour les tests</td><td>`'false'`</td><td>`'true', 'false'`</td></tr></tbody></table>
Annexe 5 : Captures d'écran de l'interface web

INRAO
Bienvenue sur Vue.js Initializr !

Création d'un nouveau projet

Généralités

1

Nom du projet (Obligatoire)

Application

Nom du dossier

application

2

Description

Une application avec Vue.js et Vite...

Nom de l'auteur

Email de l'auteur

3

Licence

Aucune

<figure><img src="image_4.png" /></figure>

Souhaitez-vous un changelog ?

Non

Oui

4

Suivant

<figure><img src="image_5.png" /></figure>
# Bienvenue sur Vue.js Initializr !

Création d'un nouveau projet

## Javascript

1

<figure><img src="image_6.png" /></figure>

2

<figure><img src="image_7.png" /></figure>

3

<figure><img src="image_8.png" /></figure>

4

<figure><img src="image_9.png" /></figure>

Gestionnaire de dépendances

◎ Npm

○ Pnpm

○ Yarn

○ Bun

Interpreteur javascript

◎ Module

○ CommonJs

Client http

◎ Fetch

○ Axios

Typescript

◎ Non

○ Oui

Souhaitez-vous supporter JSX ?

◎ Non

○ Oui

<figure><img src="image_10.png" /></figure>

<figure><img src="image_11.png" /></figure>
### Qualité du code

1

Souhaitez-vous écrire des des tests unitaires avec Vitest ?

◯ Non

◯ Oui

2

Souhaitez-vous écrire des tests end-to-end ?

◯ Non

◯ Oui

Souhaitez-vous utiliser Eslint ?

◯ Non

◯ Oui

Name d'espaces pour l'indentation: 2

3

Souhaitez-vous utiliser Prettier ?

◯ Non

◯ Oui

Souhaitez-vous utiliser SonarQube ?

◯ Non

◯ Oui

4

<figure><img src="image_12.png" /></figure>

<figure><img src="image_13.png" /></figure>
# Bienvenue sur Vue.js Initializr !

Création d'un nouveau projet

## Librairies nécessaires

1

Souhaitez-vous utiliser un framework CSS ?

Non

Oui

Souhaitez-vous une librairie pour gérer le routage ?

Non

Oui

Souhaitez-vous une librairie pour gérer les dates ?

Non

Oui

Souhaitez-vous une librairie pour sélectionner des dates dans un formulaire ?

Non

Oui

3

Souhaitez-vous une librairie pour afficher des cartes ?

Non

Oui

Souhaitez-vous une librairie pour gérer l'état de l'application ?

Non

Oui

4

<figure><img src="image_14.png" /></figure>

Précédent

Créer
# Bienvenue sur Vue.js Initializr !

Création d'un nouveau projet

## Généralités

1

Nom du projet (Obligatoire)

Application

Nom du dossier

application

2

Description

Une application

Nom de l'auteur

3

Email de l'auteur

Licence

Aucune

4

Souhaitez-vous un changelog ?

Non

Oui

Valeurs manquantes

Le nom du projet doit être renseigné

Fermer

Suivant →

<figure><img src="image_15.png" /></figure>

4

<figure><img src="image_16.png" /></figure>

Précédent

Créer

Nom du projet (Obligatoire)

An Amazing App

Nom du dossier

an-amazing-app