Comment créer un fichier vue dans le code

Vue.js est un framework JavaScript populaire qui permet de créer rapidement des interfaces Web interactives. Contrairement à d'autres frameworks JavaScript, Vue.js utilise des composants pour créer des applications. Les composants Vue existent sous la forme de fichiers .vue, qui contiennent des modèles, des scripts et des styles Vue. Voyons comment créer un fichier Vue.

Pour créer un composant Vue, vous devez d'abord installer l'outil Vue CLI. Cet outil peut créer automatiquement des projets Vue pour nous et fournit de nombreux outils et fonctions pratiques. Tout d'abord, entrez la commande suivante sur la ligne de commande pour installer Vue CLI :

npm install -g @vue/cli

Une fois l'installation terminée, nous pouvons vérifier si Vue CLI est installée avec succès en utilisant la commande suivante :

vue --version

Si l'installation réussit, le les informations sur la version de Vue CLI seront affichées. Ensuite, nous pouvons créer un nouveau projet à l'aide de Vue CLI. Entrez la commande suivante dans la ligne de commande :

vue create my-project

"mon-projet" voici le nom du projet, vous pouvez le modifier selon vos besoins. Lors de l'exécution de cette commande, Vue CLI vous demandera de sélectionner un préréglage, tel que Par défaut, Manuellement, PWA, Simple, etc. La sélection du préréglage par défaut générera automatiquement un projet Vue contenant les paramètres par défaut. La sélection du préréglage manuel vous obligera à sélectionner manuellement divers paramètres.

Une fois le projet Vue créé avec succès, vous pouvez utiliser Vue CLI pour exécuter le projet. Entrez la commande suivante sur la ligne de commande :

cd my-project
npm run serve

Cette commande démarrera un serveur local. Visitez http://localhost:8080/ dans le navigateur pour voir l'effet d'exécution du projet Vue.

Maintenant que nous avons créé le projet Vue, créons un fichier .vue. Créez un nouveau fichier dans le répertoire src/components et nommez-le MyComponent.vue. Entrez le code suivant dans le fichier :

<template>
   <div>
      <h1>Hello, World!</h1>
   </div>
</template>

<script>
export default {
   name: 'MyComponent'
}
</script>

<style>
h1 {
   color: red;
}
</style>

Ce fichier .vue contient trois parties :