Comment créer des composants dans Vue CLI
Conditions préalables
Avant de commencer avec cela, il y a des conditions préalables que vous devez avoir:
- Connaissance de base de HTML, CSS et JavaScript.
- Nœud.JS installé sur votre système d'exploitation.
Vérifiez l'installation de Vue CLI
Tout d'abord, assurez-vous que la dernière Vue CLI 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 package NPM ou le gestionnaire de packages de fils pour installer la Vue CLI. Afin de l'installer à l'aide du gestionnaire de package NPM, vous devez saisir la commande ci-dessous dans le terminal:
$ npm install -g @ vue / CLI
Dans la commande ci-dessus, le -g Le drapeau est utilisé pour installer Vue CLI globalement sur votre système.
Une fois la Vue CLI entièrement installée, vous pouvez la 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 projets
Maintenant, supposons que vous allez configurer tout le 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 Commande dans le terminal car la Vue CLI fournit les modèles déjà générés pour commencer par le projet VUE.
Pour créer l'application VUE, tapez simplement la commande ci-dessous dans le terminal:
$ vue créer le nom de projet
Assurez-vous de remplacer le nom du projet avec le nom du projet souhaité et le coup Entrer.
Après quelques secondes, il invitera à sélectionner le préréglage par défaut ou à sélectionner certaines fonctionnalités manuellement.
Si vous souhaitez avoir des fonctionnalités personnalisées, sélectionnez «Sélectionnez manuellement les fonctionnalités», Appuyez sur ENTER, et vous serez invité avec certaines options comme la sélection de la version Vue, l'ajout de Vuex ou du routeur. Sélectionnez votre option souhaitée et appuyez sur Entrer.
Répondez à certaines questions de configuration nécessaires et enregistrez le préréglage pour les futurs projets.
Le projet VUE sera créé depuis un certain temps à l'aide de la Vue CLI, et vous pouvez démarrer 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 naviguant d'abord vers le répertoire du projet à l'aide de la commande CD dans le terminal:
Nom de projet $ CD
Dans le répertoire du projet, démarrez l'application VUE en tapant la commande donnée ci-dessous dans le terminal:
$ NPM Run Serve
Après l'allumage de l'application Vue, visitez le http: // localhost: 8080 dans la barre d'adresse de votre navigateur préféré:
Vous aurez l'écran de bienvenue de la Vue.projet JS.
Création d'un composant en Vue
Pour créer un composant dans le projet VUE, créez un .vue fichier dans le Composants dossier et fournissez-le le nom de votre choix.
Maintenant, dans ce nouvellement créé .vue Fichier, vous pouvez écrire HTML, JavaScript et CSS dans le, et les balises respectivement.
Ouvrez le .vue fichier et écrire le code que vous souhaitez écrire. Par exemple:
Un nouveau composant
Ceci est un texte à l'intérieur du NewComponent.
Une fois que vous avez terminé la pièce HTML, donnez à ce composant un nom dans la balise comme indiqué dans l'extrait de code ci-dessous:
Après avoir réussi à créer le composant, voyons comment l'importer et l'utiliser sur une autre page ou composant.
Importation d'un composant en Vue
La syntaxe d'importation pour l'importation d'un composant dans tout autre composant de Vue est assez simple et facile; Il vous suffit d'importer le composant dans la balise de script à l'aide de la syntaxe ES6 comme indiqué dans l'extrait de code ci-dessous:
Après avoir importé le composant avec succès, il vous suffit de créer un objet avec le nom de Composants et fournir le nom dans le Composants objet comme indiqué ci-dessous:
Maintenant, vous pouvez l'utiliser n'importe où à l'intérieur de la balise du composant. Par exemple, si nous voulons l'importer dans le Appliquer.vue, La syntaxe serait comme ceci:
Après avoir terminé toute cette configuration, enregistrez chaque fichier que vous avez changé et revenez au navigateur
Vous pouvez voir dans la capture d'écran attachée que le composant est importé avec succès et parfaitement bien sur la page Web.
Conclusion
Création, importation et utilisation d'un composant dans tout autre composant de Vue.JS est aussi simple que de le dire. Dans cet article, nous parcourons tout le processus de création, d'addition et d'utilisation d'un composant en Vue.js.