Technologieaustausch

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

Hallo zusammen, heute werden wir untersuchen, wie man mit Vue 3 eine KI-Konversationsseite von Grund auf erstellt. Dieser Prozess wird uns nicht nur die neuen Funktionen von Vue 3 verstehen lassen, sondern uns auch ein neues Verständnis für die Erstellung interaktiver Webanwendungen vermitteln. Wenn Sie neu im Programmieren sind, machen Sie sich keine Sorgen, ich verwende eine leicht verständliche Sprache, um sicherzustellen, dass Sie jedem Schritt folgen können.

Schritt 1: Erstellen Sie ein Vue 3-Projekt

Zuerst müssen wir die Vue 3-Engineering-Umgebung einrichten. Es wird davon ausgegangen, dass Sie Node.js und npm (Node Package Manager) installiert haben.Wenn es noch nicht installiert ist, gehen Sie zunodejs.orgLaden Sie es herunter und installieren Sie es.

Öffnen Sie Ihr Befehlszeilentool und geben Sie den folgenden Befehl ein, um ein neues Vue 3-Projekt zu erstellen:

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

Befolgen Sie die Anweisungen, um die voreingestellten Optionen von Vue 3 auszuwählen, und warten Sie, bis das Projekt erstellt wird.

Schritt zwei: Überblick über die Projektstruktur

Nachdem die Erstellung abgeschlossen ist,my-ai-chat-appDie Grundstruktur des Projekts ist wie folgt:

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

Schritt 3: Schreiben Sie eine KI-Dialogseite

Als Nächstes schreiben wir den Kerncode der KI-Konversationsseite.Öffnen wir zunächstsrc/App.vueDatei, dies ist unsere Einstiegskomponentendatei.

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

Diese Vorlage ist sehr einfach, sie enthält nur arouter-view, ein Platzhalter für Vue Router, der zum Rendern passender Routenkomponenten verwendet wird.

ChatInput-Komponente

Jetzt erstellen wir eineChatInput.vue Komponente zum Versenden von Nachrichten.Offensrc/components/ChatInput.vueDatei und fügen Sie den folgenden Code hinzu:

<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>

Diese Komponente verfügt über ein Datenmodellmessage, enthält eintext Eigenschaft, die zum Binden des Eingabefelds verwendet wird.Es gibt noch einensendMessageMethode, die zur Handhabung der Logik des Nachrichtenversands verwendet wird.

main.js-Konfiguration

Schließlich müssen wir es tunsrc/main.jsStellen Sie Vue Router und Vuex sowie unsere vor und verwenden Sie sieAppKomponenten.

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');

Hier verwenden wir die Composition API von Vue 3, durchcreateAppFunktion zum Erstellen und Verwenden einer AnwendungsinstanzuseMethode installiert Vue Router und Vuex.

Schritt 4: So führen Sie Ihre Vue 3-Anwendung aus

Da unsere KI-Konversationsseite nun fertig ist, besteht der nächste Schritt darin, sie auszuführen.

1. Öffnen Sie das Befehlszeilentool und navigieren Sie zu Ihrem Projektverzeichnis.
2. Führen Sie den folgenden Befehl aus, um den Entwicklungsserver zu starten:

npm run serve

Nachdem der Befehl ausgeführt wurde, sehen Sie normalerweise die folgende Ausgabe, die Sie zum Übergeben auffordertlocalhostAdresse für den Zugriff auf Ihre Bewerbung:

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

Öffnen Sie Ihren Browser und besuchen Siehttp://localhost:8080/, Sie sehen Ihre KI-Konversationsseite.

So fordern Sie den vollständigen Code an

Wenn Sie den vollständigen Code erhalten möchten, um die Struktur und Logik des gesamten Projekts besser zu verstehen, überprüfen Sie dies bitteHinterlassen Sie Ihre E-Mail im Kommentarbereich。

Abschluss

Heute haben wir gelernt, wie man mit Vue 3 eine einfache KI-Konversationsseite erstellt.Dies ist nur eine Einführung in den statischen Seiteneffekt. Informationen zum Zugriff auf das große Modell und zur Realisierung der echten KI-Dialogfunktion finden Sie in diesem Artikel, den ich geschrieben habe.So erstellen Sie kostenlos ein KI-Dialog-WeChat-Applet (Quellcode beigefügt)