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 :

d477f9ce7bf77f53fbcf36bec1b69b7a : partie modèle, contenant le code HTML permettant de restituer la structure du composant.

3f1c4e4b6b16bbbd69b2ee476dc4f83a : La partie script contient du code JavaScript pour restituer la logique du composant.

c9ccee2e6ea535a969eb3f532ad9fe89 : La section style contient du code CSS pour restituer le style du composant.

Dans le fichier .vue, utilisez export default {} pour exporter le composant Vue. Dans cet exemple, nous avons exporté un composant Vue nommé « MyComponent ». Nous pouvons également définir des accessoires, des données, des méthodes calculées et d'autres propriétés et méthodes dans les composants Vue pour les composants.

Enfin, nous devons utiliser ce composant MyComponent dans d'autres composants. Dans d'autres composants Vue, nous pouvons introduire le composant MyComponent comme suit :

<template>
   <div>
      <my-component></my-component>
   </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
   components: {
      'my-component': MyComponent
   }
}
</script>

Ici, nous importons le composant MyComponent dans d'autres composants Vue via le mot-clé import et l'enregistrons en tant que sous-composant via l'attribut composants. Ce composant peut être rendu à l'aide de la balise b98f2d1b8b5d79f8c1b053de334aa7b5

Ci-dessus sont les étapes simples pour créer un composant Vue. Créez un projet Vue à l'aide de Vue CLI, puis créez un fichier .vue, écrivez le code et utilisez-le dans d'autres composants Vue. Le modèle de développement basé sur les composants de Vue.js permet aux développeurs de créer des applications plus facilement et plus rapidement, et améliore la réutilisabilité et la modularité du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!