Construyendo conversaciones futuras: implementando una página de chat de IA basada en Vue 3 desde cero

2024-07-12

Hola a todos, hoy exploraremos cómo crear una página de conversación de IA desde cero usando Vue 3. Este proceso no solo nos permitirá comprender las nuevas características de Vue 3, sino que también nos brindará una nueva comprensión de la creación de aplicaciones web interactivas. Si eres nuevo en la programación, no te preocupes, usaré un lenguaje fácil de entender para asegurarme de que puedas seguir cada paso.

Paso 1: crear un proyecto de Vue 3

Primero, necesitamos configurar el entorno de ingeniería de Vue 3. Se supone que tiene instalados Node.js y npm (administrador de paquetes de Node).Si aún no está instalado, vaya anodejs.orgDescárgalo e instálalo.

Abra su herramienta de línea de comando e ingrese el siguiente comando para crear un nuevo proyecto de Vue 3:

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

Siga las indicaciones para seleccionar las opciones preestablecidas de Vue 3 y espere a que se cree el proyecto.

Paso dos: descripción general de la estructura del proyecto

Una vez completada la creación,my-ai-chat-appLa estructura básica del proyecto es la siguiente:

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

Paso 3: escribir una página de diálogo de IA

A continuación, escribiremos el código central de la página de conversación de IA.Primero, abramossrc/App.vuearchivo, este es nuestro archivo de componente de entrada.


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

Esta plantilla es muy sencilla, sólo contiene unrouter-view, que es un marcador de posición para Vue Router que se utiliza para representar componentes de ruta coincidentes.

Componente ChatInput

Ahora, creamos unChatInput.vue Componente para enviar mensajes.Abiertosrc/components/ChatInput.vuearchivo y agregue el siguiente código:


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

Este componente tiene un modelo de datos.message, contiene unatext Propiedad, utilizada para vincular el cuadro de entrada.todavía hay unosendMessageMétodo, utilizado para manejar la lógica del envío de mensajes.

configuración principal.js

Finalmente, necesitamossrc/main.jsIntroducir y utilizar Vue Router y Vuex, así como nuestroAppcomponentes.


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

Aquí utilizamos la API de composición de Vue 3, a través decreateAppfunción para crear una instancia de aplicación y usaruseMétodo instalado Vue Router y Vuex.

Paso 4: Cómo ejecutar su aplicación Vue 3

Ahora que nuestra página de conversación sobre IA está lista, el siguiente paso es cómo ejecutarla.

Abra la herramienta de línea de comando y navegue hasta el directorio de su proyecto.
Ejecute el siguiente comando para iniciar el servidor de desarrollo:

npm run serve

Después de ejecutar el comando, normalmente verá el siguiente resultado, solicitándole que paselocalhostDirección para acceder a su solicitud:

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

Abra su navegador y visitehttp://localhost:8080/, verá su página de conversación de IA.

Cómo solicitar el código completo

Si desea obtener el código completo para comprender mejor la estructura y lógica de todo el proyecto, consulteDeja tu correo electrónico en el área de comentarios。

Conclusión

Hoy aprendimos cómo usar Vue 3 para crear una página de conversación de IA sencilla.Esta es solo una introducción al efecto de página estática. Con respecto a cómo acceder al modelo grande y realizar la función de diálogo de IA real, consulte este artículo que escribí.Cómo crear un subprograma WeChat de diálogo de IA sin costo (código fuente adjunto)

Compartir tecnología