Conditions préalables
Avant de commencer avec cela, il y a quelques prérequis que vous devez avoir :
- Connaissances de base en HTML, CSS et JavaScript.
- Nœud.js installé sur votre système d'exploitation.
Vérifier l'installation de Vue CLI
Tout d'abord, assurez-vous que la dernière CLI Vue est installée sur votre système. Vous pouvez vérifier que Vue CLI est installé ou non sur notre système en tapant la commande ci-dessous :
$ vue --version
S'il est installé, vous aurez la dernière version de Vue CLI imprimée dans le terminal. Sinon, s'il n'est pas installé, vous pouvez soit utiliser le gestionnaire de packages NPM ou le gestionnaire de packages Yarn pour installer Vue CLI. Pour l'installer à l'aide du gestionnaire de packages NPM, vous devez taper la commande ci-dessous dans le terminal :
$ npm install -g @vue/cliDans la commande ci-dessus, le -g flag est utilisé pour installer Vue CLI globalement sur votre système.
Une fois que Vue CLI est complètement installé, vous pouvez le vérifier en tapant la commande ci-dessous :
$ vue --version
Vous aurez la dernière version de Vue CLI dans la sortie.
Création de projet
Maintenant, supposons que vous allez configurer l'ensemble du projet Vue par vous-même. Dans ce cas, ce n'est pas un bon choix de réinventer la roue ; le projet Vue peut être créé en utilisant le vue dans le terminal car la CLI Vue fournit les modèles déjà générés pour démarrer avec le projet Vue.
Pour créer l'application Vue, il suffit de taper la commande ci-dessous dans le terminal :
$ vue create project-nameAssurez-vous de remplacer le nom du projet avec le nom de votre projet souhaité et appuyez sur Entrer.
Après quelques secondes, il vous invitera à sélectionner le préréglage par défaut ou à sélectionner manuellement certaines fonctionnalités.
Si vous souhaitez avoir des fonctionnalités personnalisées, sélectionnez « Sélectionner manuellement les fonctionnalités » appuyez sur Entrée, et vous serez invité avec certaines options telles que la sélection de la version Vue, l'ajout de Vuex ou d'un routeur. Sélectionnez l'option souhaitée et appuyez sur Entrer.
Répondez à quelques questions de configuration nécessaires et enregistrez le préréglage pour de futurs projets.
Le projet Vue sera créé dans un certain temps à l'aide de Vue CLI, et vous pouvez commencer le développement dans Vue.js.
Démarrage de l'application Vue
Une fois le projet Vue créé, vous pouvez démarrer le projet en accédant d'abord au répertoire du projet à l'aide de la commande cd dans le terminal :
$ cd nom-projetDans le répertoire du projet, lancez l'application Vue en tapant la commande ci-dessous dans le terminal :
$ npm exécuter servirAprès le démarrage de l'application Vue, rendez-vous sur http://localhost:8080 dans la barre d'adresse de votre navigateur préféré :
Vous aurez l'écran de bienvenue du Vue.projet js.
Création d'un composant dans Vue
Pour créer un composant dans le projet Vue, créez un .vue fichier dans le Composants dossier et donnez-lui le nom de votre choix.
Maintenant, dans ce nouveau .vue fichier, vous pouvez écrire du HTML, du Javascript et du CSS dans le , Après avoir réussi à créer le composant, voyons comment l'importer et l'utiliser sur une autre page ou un autre composant. La syntaxe d'import pour importer un composant dans n'importe quel autre composant de Vue est assez simple et facile ; il vous suffit d'importer le composant à l'intérieur de la balise de script en utilisant la syntaxe ES6 comme indiqué dans l'extrait de code ci-dessous : Après avoir importé le composant avec succès, tout ce que vous avez à faire est de créer un objet avec le nom de Composants et indiquez le nom dans le Composants objet comme indiqué ci-dessous : Maintenant, vous pouvez l'utiliser n'importe où à l'intérieur du étiquette du composant. Par exemple, si nous voulons l'importer dans le Application.vue, la syntaxe serait comme ceci : Après avoir terminé toute cette configuration, enregistrez chaque fichier que vous avez modifié et revenez au navigateur Vous pouvez constater dans la capture d'écran ci-jointe que le composant est importé avec succès et parfaitement sur la page Web. Créer, importer et utiliser un composant dans n'importe quel autre composant de Vue.js est aussi simple que de le dire. Dans cet article, nous parcourons l'ensemble du processus de création, d'ajout et d'utilisation d'un composant dans Vue.js. Importation d'un composant dans Vue
Conclusion