Vue

Comment créer des composants dans Vue CLI

Comment créer des composants dans Vue CLI
Vue.js fournit le Vue CLI pour fournir la commande vue à l'intérieur du terminal pour échafauder rapidement un nouveau projet de Vue.js et exécutez Vue.js en utilisant le vue servir commander. Vue.js fournit également l'interface utilisateur graphique pour gérer les projets à l'aide du vue ui commander. Vue.js est reconnu comme combinant deux frameworks spectaculaires, Angular et React, en utilisant la syntaxe de modèle d'Angular et la méthode props de React. Il fournit la méthode HTML et CSS traditionnelle pour créer un composant, et dans cet article, nous passerons en revue le processus de création et de compréhension des composants dans Vue CLI.

Conditions préalables

Avant de commencer avec cela, il y a quelques prérequis que vous devez avoir :

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/cli

Dans 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-name

Assurez-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-projet

Dans le répertoire du projet, lancez l'application Vue en tapant la commande ci-dessous dans le terminal :

$ npm exécuter servir

Aprè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