Comment créer un projet dans Vue 3.0

La version officielle de Vue3.0 a été publiée en septembre 2020, apportant de nombreuses améliorations, permettant aux développeurs d'écrire des applications Vue de manière plus flexible et efficace. Dans cet article, nous apprendrons comment créer des projets dans Vue 3.0.

1. Installer Vue CLI

Tout d'abord, nous devons installer Vue CLI localement. Vue CLI est un outil d'échafaudage officiellement fourni par Vue, qui est utilisé pour générer rapidement des modèles pour les applications Vue.

Exécutez la commande suivante dans la ligne de commande pour installer Vue CLI :

npm install -g @vue/cli

2. Créer un projet Vue

Après avoir installé Vue CLI, nous pouvons utiliser les commandes qu'il fournit pour créer rapidement un projet Vue.

Exécutez la commande suivante sur la ligne de commande pour créer un nouveau projet Vue 3.0 :

vue create my-project

Où, mon-projet est le nom du projet.

Après avoir exécuté la commande ci-dessus, Vue CLI vous demandera de sélectionner les fonctionnalités à installer. Vous pouvez utiliser les touches fléchées haut et bas pour sélectionner les propriétés et la barre d'espace pour sélectionner/désélectionner les propriétés. Nous pouvons choisir la configuration par défaut.

3. Exécuter le projet Vue

Après avoir créé le projet Vue, nous pouvons utiliser la commande suivante pour démarrer l'application :

npm run serve

Cette commande compilera le projet et démarrera le serveur local. Une fois le serveur démarré, vous pouvez accéder à l'application en visitant http://localhost:8080 dans votre navigateur.

4. Écriture de composants Vue

Dans Vue 3.0, la façon dont les composants sont écrits est différente de Vue 2.x. Les composants de Vue 3.0 sont composés d'une seule fonction setup() au lieu des composants à fichier unique de Vue 2.x.

Ce qui suit est un exemple simple de composant Vue 3.0 :

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue 3!')
    return {
      message
    }
  }
}
</script>

Comme vous pouvez le voir, nous utilisons la fonction setup() pour créer la partie logique du composant et introduisons la fonction réactive ref() de Vue 3.0.

5. Interagir avec l'API

Dans Vue 3.0, nous pouvons utiliser les deux nouvelles API fournies par Vue - API de composition et API pour interagir avec l'API. L'API Composition offre un moyen plus pratique d'écrire et d'organiser le code des composants, tandis que les API offrent la possibilité d'interagir directement avec les instances Vue.

Ce qui suit est un exemple d'utilisation de l'API Composition pour interagir avec l'API :

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref, onMounted } from 'vue'
import Axios from 'axios'

export default {
  setup() {
    const message = ref('')
    onMounted(() => {
      Axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => {
        message.value = response.data.title
      })
    })
    return {
      message
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous avons utilisé les fonctions ref() et onMounted() pour créer une variable de message réactive et la monter sur le composant. Axios pour obtenir les données API et attribuer le titre renvoyé à la variable de message.

6. Conclusion

Vue 3.0 apporte de nombreuses améliorations et nouvelles fonctionnalités, rendant le développement d'applications Vue plus efficace et flexible. Dans cet article, nous avons appris à utiliser Vue CLI pour créer rapidement un projet Vue 3.0 et créé un composant Vue simple pour démontrer la méthode d'écriture de composant et la méthode d'interaction API dans Vue 3.0.

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!