Guide du débutant pour créer une application Vue.js à l’aide de Vue CLI / Blogs / Perficient

Introduction à Vue.js :

Vue.js est un framework JavaScript convivial et progressif qui simplifie la création d’applications Web dynamiques. Il est connu pour sa flexibilité et sa facilité d’intégration, ce qui en fait un choix populaire auprès des développeurs.

Voici un guide simple pour créer une application Vue.js :

Conditions préalables:
Node.js version 10.6.0 ou supérieure installée sur votre ordinateur. Vous pouvez télécharger Node.js depuis le site officiel : https://nodejs.org/. Après l’avoir installé, vous pouvez vérifier les versions de Node.js et npm (Node Package Manager) en exécutant les commandes suivantes dans votre terminal.

Une fois Node.js et npm installés avec succès, vous pouvez procéder à l’installation de Vue CLI, qui est utilisée pour créer des applications Vue.js.

Étape 1 : Téléchargement de Vue CLI 3

Vue.js dispose d’un outil pratique appelé Vue CLI pour créer et gérer des projets Vue.js. Vous pouvez le configurer globalement à l’aide de cette commande : npm install -g @vue/cli

Étape 2 : Créer un projet Vue.js

Une fois Vue CLI installée, vous pouvez démarrer un nouveau projet Vue.js. Ouvrez simplement votre terminal, allez dans le dossier où vous voulez votre projet, puis utilisez cette commande : vue créer le nom du projet

Remplacez le nom du projet par le nom de votre projet.

Dans mon cas, je nomme le projet « vue-app ».

Vue CLI vous demandera de choisir un préréglage. Vous pouvez soit choisir le préréglage par défaut, soit sélectionner manuellement les fonctionnalités de votre projet.

Préréglage par défaut :

Une fois que vous avez choisi le préréglage par défaut, appuyez simplement sur ENTRÉE et Vue CLI lancera le processus de création d’application.

Préréglage manuel :

La sélection de « Sélectionner manuellement les fonctionnalités » dans Vue CLI mènera à un ensemble de questions qui vous permettront de personnaliser votre projet en fonction de vos goûts et de vos besoins. Ces questions couvrent divers aspects de votre projet.
J’ai fait des sélections qui correspondent aux exigences spécifiques de mon projet.

Dans mon cas, je développe un projet en utilisant un préréglage manuel.

Étape 3 : Configuration du projet

Après avoir créé le projet, accédez au répertoire du projet à l’aide de cette commande : cd vue-app

Étape 4 : Configuration d’un serveur de développement pour l’aperçu de l’application Vue.js

Pour prévisualiser votre application Vue.js, lancez un serveur de développement à l’aide de cette commande : npm exécuter servir

L’exécution de la commande ci-dessus lancera le serveur de développement, vous permettant d’ouvrir votre application Vue.js dans un navigateur Web en accédant à l’URL fournie, généralement http://localhost:8080. S’il s’agit d’un autre port, la CLI vous dira :

Pour voir votre projet nouvellement créé, ouvrez simplement votre navigateur Web préféré et entrez http://localhost:8080 dans la barre d’adresse. Là, vous serez accueilli avec un écran de bienvenue présentant le logo Vue et les technologies que vous avez choisies lors des étapes précédentes.

Étape 5 : Créer et déployer

Lorsque vous êtes prêt à publier votre application Vue.js, vous pouvez générer une version prête pour la production à l’aide de la commande suivante : npm exécuter la construction

Avant d’exécuter la commande « npm run dev », la structure ressemble à ceci.

L’exécution de cette commande générera un répertoire « dist » contenant le code optimisé et les ressources prêtes pour la production.

Étape 6 : personnalisation supplémentaire

• Pour une personnalisation plus poussée, vous avez la possibilité d’ajuster votre projet Vue.js en modifiant les fichiers du projet, y compris le répertoire « src » de votre code source.
• Vous pouvez également configurer des dépendances supplémentaires telles que Vue Router et Vuex selon vos besoins.

C’est tout ce qu’on peut en dire! Vous avez installé et configuré avec succès une application Vue.js sur votre système. Vous êtes maintenant prêt à commencer le développement de votre application Vue.js, en tirant parti des composants et fonctionnalités de Vue dans votre projet.

Voici une explication d’une structure typique de dossiers d’application Vue :

1) Répertoire src : Au cœur de votre application Vue.js, ce répertoire sert de point de départ.

-actifs: Ce dossier est destiné aux ressources statiques telles que les images, les polices et les fichiers CSS.
composants : ce sont des composants Vue que vous pouvez utiliser dans votre application. Ils peuvent concerner l’ensemble de l’application ou des parties spécifiques de celle-ci.
-vues : Ce dossier contient généralement les composants Vue de niveau supérieur pour différentes vues ou pages de votre application. Chaque composant de vue peut contenir d’autres composants et ils représentent les différentes sections ou pages de votre application.
-routeur : C’est ici que vous définissez la configuration de routage de votre application à l’aide de Vue Router. Généralement, vous aurez un router.js fichier pour les définitions d’itinéraire et un index.js fichier pour la configuration du routeur.
-magasin: Si vous utilisez Vuex pour la gestion d’état, ce répertoire est utilisé pour organiser les modules de votre magasin. Vous pouvez disposer d’un fichier index.js pour le magasin racine et de fichiers de module distincts pour différentes parties de l’état de votre application.
-plugins : Tous les plugins Vue.js, qu’il s’agisse de bibliothèques tierces ou d’utilitaires personnalisés, peuvent être placés dans ce répertoire.
-mixins : Si vous disposez de fonctionnalités communes que vous souhaitez réutiliser sur plusieurs composants, vous pouvez les placer dans ce répertoire en tant que mixins.
-directives : Les directives personnalisées, qui permettent des manipulations DOM de bas niveau, peuvent être définies et stockées ici.
-filtres: C’est ici que vous définissez des filtres personnalisés pour formater ou transformer les données dans vos modèles.

2) Annuaire public : Ce répertoire est destiné aux actifs statiques qui n’ont pas besoin de passer par le processus de construction. Ces actifs sont directement accessibles via le serveur web. Par exemple, vous pouvez placer votre fichier index.html dans ce répertoire.

3) Répertoire des tests : Pour les tests unitaires, souvent écrits à l’aide d’outils comme Jest, vous pouvez les organiser en reflétant la structure de votre src annuaire.

4) Répertoire dist : Après avoir créé votre application Vue, ce répertoire contient le code prêt pour la production. Il est généralement généré automatiquement lorsque vous exécutez la commande build.

5) Répertoire des modules de nœuds : Toutes les dépendances et packages du projet sont stockés dans ce répertoire, généralement géré par des gestionnaires de packages tels que npm ou Yarn.

6) babel.config.js : Ce fichier de configuration est destiné à Babel, qui transpile votre code JavaScript.

7) package.json : Le package.json Le fichier contient les métadonnées essentielles du projet, les scripts et les informations sur les dépendances.

8) view.config.js : Fichier de configuration facultatif pour Vue CLI, il vous permet de personnaliser le processus de construction, de configurer les paramètres de proxy et d’effectuer des ajustements spécifiques au projet.

9) LISEZMOI.md : Documentation pour votre projet.

N’oubliez pas qu’il ne s’agit que d’une convention courante et que la structure réelle des dossiers peut varier en fonction des besoins spécifiques de votre projet. La flexibilité de Vue vous permet d’adapter la structure en fonction des exigences de votre application.