Exemple de démarrage de VUE3 : créer une application de messagerie instantanée simple

Vue3 est l'un des frameworks JavaScript les plus avancés actuellement disponibles, il s'agit de la version nouvelle génération de Vue.js. Vue3 offre non seulement de meilleures performances et des fonctionnalités plus riches, mais offre également une meilleure expérience de développement. Dans cet article, nous présenterons comment utiliser Vue3 pour créer une application de messagerie instantanée simple.

1. Déterminer la structure de l'application

Avant de commencer à créer l'application, nous devons déterminer la structure de l'application. Dans notre exemple d'application, nous allons créer les composants suivants :

• App.vue : Le composant principal de l'application, chargé d'afficher tous les autres composants.
• ChatList.vue : affiche la liste de discussion liée à l'utilisateur.
• ChatMessage.vue : affiche un seul message de discussion.
• ChatInput.vue : fournit des composants d'entrée permettant aux utilisateurs d'interagir avec les messages.

2. Création de l'application

Avant de commencer à créer votre application, assurez-vous que les dernières versions de Node.js et de Vue CLI sont installées sur votre ordinateur.

Pour créer une application, utilisez la CLI Vue et exécutez la commande suivante :

vue create chat-app

Cela créera une nouvelle application Vue3. Vous devez ensuite suivre les invites à l'écran et sélectionner les options suivantes :

• Sélectionnez la fonction d'installation manuelle
• Sélectionnez Babel et Router
• Sélectionnez « ESLint+Prettier » avec « l'espace » après la question d'installation
• Sélectionnez « Pelucher et réparer lors de la validation »

3. Créer des composants

Ensuite, nous devons créer les composants de notre application. Vous pouvez créer les fichiers suivants dans le répertoire /src/components/ : rreee

à l'état de gestion dans le composant parent

Dans notre application, nous devons partager des données entre plusieurs composants. Nous pouvons donc définir l'état dans le composant parent et le transmettre à tous les composants enfants. Dans App.vue nous ajouterons le code suivant :

<template>
  <div class="chat-app">
    <ChatList />
    <ChatInput />
  </div>
</template>

<script>
import ChatList from "./ChatList";
import ChatInput from "./ChatInput";

export default {
  name: "App",
  components: {
    ChatList,
    ChatInput,
  },
};
</script>

<style>
.chat-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}
</style>

• Ce code initialisera le tableau messages et ajoutera la méthode sendMessage qui recevra chaque message et l'ajoutera au tableau messages.

Gestion des événements dans les composants enfants

Maintenant, nous devons gérer l'événement sendMessage dans les composants enfants et l'envoyer au composant parent. Dans ChatInput.vue, nous ajouterons le code suivant :

<template>
  <div class="chat-list">
    <ChatMessage v-for="message in messages" :key="message.id" :message="message" />
  </div>
</template>

<script>
import ChatMessage from "./ChatMessage";

export default {
  name: "ChatList",
  components: {
    ChatMessage,
  },
  data() {
    return {
      messages: [
        { id: 1, text: "Hello", author: "Alice" },
        { id: 2, text: "Hi there", author: "Bob" },
      ],
    };
  },
};
</script>

<style>
.chat-list {
  height: calc(100% - 64px);
  overflow-y: scroll;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
</style>

• Ce code déclenchera l'événement d'envoi lorsque l'utilisateur enverra un message et renverra le texte du message au composant parent en tant que paramètre.

Afficher les données dans le composant enfant

Enfin, nous devons afficher les données dans le composant enfant. Dans ChatMessage.vue et ChatList.vue, nous utiliserons le code suivant :

<template>
  <div class="chat-message">
    <div class="chat-message-author">{{ message.author }}</div>
    <div class="chat-message-text">{{ message.text }}</div>
  </div>
</template>

<script>
export default {
  name: "ChatMessage",
  props: {
    message: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style>
.chat-message {
  margin-bottom: 8px;
}

.chat-message-author {
  font-weight: bold;
  margin-bottom: 4px;
}

.chat-message-text {
  font-size: 16px;
}
</style>

Ce code affichera le composant ChatMessage en fonction du contenu du tableau messages.

Exécutez l'application

Maintenant, notre application est prête. Pour exécuter l'application, exécutez la commande suivante :

<template>
  <div class="chat-input">
    <input type="text" v-model="message" @keyup.enter="sendMessage" />
    <button @click="sendMessage">Send</button>
  </div>
</template>

<script>
export default {
  name: "ChatInput",
  data() {
    return {
      message: "",
    };
  },
  methods: {
    sendMessage() {
      this.$emit("send", this.message);
      this.message = "";
    },
  },
};
</script>

<style>
.chat-input {
  display: flex;
  height: 64px;
  padding: 16px;
}

.chat-input input {
  flex: 1;
  border-radius: 4px 0 0 4px;
  border: none;
  padding: 8px;
  font-size: 16px;
}

.chat-input button {
  border-radius: 0 4px 4px 0;
  border: none;
  background-color: #007aff;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  cursor: pointer;
}
</style>

Cela lancera l'application sur votre serveur de développement local, accessible sur http://localhost:8080/.

Résumé

6. Cet article explique comment utiliser Vue3 pour créer une application de messagerie instantanée simple. Nous avons appris comment créer des applications et des composants à l'aide de Vue CLI, et comment définir l'état des composants parents, gérer les événements et afficher les données dans les composants enfants. Grâce à cet article, vous pouvez apprendre à utiliser Vue3 pour développer des applications Web modernes et interactives et établir une base solide pour votre prochain projet.

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!