Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Bonjour à tous, aujourd'hui, nous allons explorer comment créer une page de conversation IA à partir de zéro à l'aide de Vue 3. Ce processus nous permettra non seulement de comprendre les nouvelles fonctionnalités de Vue 3, mais nous donnera également une nouvelle compréhension de la création d'applications Web interactives. Si vous débutez en programmation, ne vous inquiétez pas, j'utiliserai un langage facile à comprendre pour m'assurer que vous puissiez suivre chaque étape.

Étape 1 : Créer un projet Vue 3

Tout d’abord, nous devons configurer l’environnement d’ingénierie Vue 3. Il est supposé que Node.js et npm (gestionnaire de packages Node) sont installés.S'il n'est pas encore installé, allez surnodejs.orgTéléchargez-le et installez-le.

Ouvrez votre outil de ligne de commande et entrez la commande suivante pour créer un nouveau projet Vue 3 :

npm install -g @vue/cli vue create my-ai-chat-app

Suivez les invites pour sélectionner les options prédéfinies de Vue 3 et attendez que le projet soit créé.

Deuxième étape : aperçu de la structure du projet

Une fois la création terminée,my-ai-chat-appLa structure de base du projet est la suivante :

my-ai-chat-app
│   README.md
│   package.json
│
├───node_modules
├───public
└───src
    │   App.vue
    │   main.js
    │
    ├───assets
    ├───components

        │   ChatInput.vue
    ├───router

        │   index.js
    ├───store
    └───views

        │   Chat.vue

Étape 3 : Rédiger la page de dialogue sur l'IA

Ensuite, nous écrirons le code principal de la page de conversation AI.Tout d'abord, ouvronssrc/App.vuefichier, c'est notre fichier de composant d'entrée.

<template>
  <div id="app">
    <router-view />
  </div>
</template>

Ce modèle est très simple, il contient uniquement unrouter-view, qui est un espace réservé pour Vue Router utilisé pour restituer les composants d'itinéraire correspondants.

Composant ChatInput

Maintenant, nous créons unChatInput.vue Composant d'envoi de messages.Ouvrirsrc/components/ChatInput.vuefichier et ajoutez le code suivant :

<template>
  <div>
    <!-- 消息展示 -->
    <div>{{ message.text }}</div>
    <!-- 输入框 -->
    <input v-model="message.text" placeholder="Type a message">
    <!-- 发送按钮 -->
    <button @click="sendMessage">Send</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: {
        text: ''
      }
    };
  },
  methods: {
    sendMessage() {
      // 这里将添加发送消息的逻辑
      console.log('Sending message:', this.message.text);
      this.message.text = ''; // 清空输入框
    }
  }
};
</script>

Ce composant a un modèle de donnéesmessage, contient untext Propriété, utilisée pour lier la zone de saisie.Il y en a encore unsendMessageMéthode, utilisée pour gérer la logique d’envoi des messages.

configuration main.js

Enfin, nous devonssrc/main.jsPrésentez et utilisez Vue Router et Vuex, ainsi que notreAppComposants.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
 
createApp(App).use(store).use(router).mount('#app');

Ici, nous utilisons l'API Composition de Vue 3, viacreateAppfonction pour créer une instance d'application et utiliseruseMéthode installée Vue Router et Vuex.

Étape 4 : Comment exécuter votre application Vue 3

Maintenant que notre page de conversation sur l'IA est prête, l'étape suivante consiste à savoir comment l'exécuter.

1. Ouvrez l'outil de ligne de commande et accédez au répertoire de votre projet.
2. Exécutez la commande suivante pour démarrer le serveur de développement :

npm run serve

Une fois la commande exécutée, vous verrez généralement le résultat suivant, vous invitant à transmettrelocalhostAdresse pour accéder à votre candidature :

DONE Compiled successfully in Xms App running at: - Local: http://localhost:8080/ - Network: http://<network-address>:8080/

Ouvrez votre navigateur et visitezhttp://localhost:8080/, vous verrez votre page de conversation IA.

Comment demander le code complet

Si vous souhaitez obtenir le code complet pour mieux comprendre la structure et la logique de l'ensemble du projet, veuillez vérifierLaissez votre email dans la zone commentaire。

Conclusion

Aujourd'hui, nous avons appris à utiliser Vue 3 pour créer une simple page de conversation IA.Ceci n'est qu'une introduction à l'effet de page statique. Concernant la façon d'accéder au grand modèle et de réaliser la véritable fonction de dialogue IA, veuillez consulter cet article que j'ai écrit.Comment créer une applet WeChat de dialogue IA sans frais (code source ci-joint)