Condivisione della tecnologia

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

Ciao a tutti, oggi esploreremo come creare da zero una pagina di conversazione AI utilizzando Vue 3. Questo processo non solo ci consentirà di comprendere le nuove funzionalità di Vue 3, ma ci fornirà anche una nuova comprensione della creazione di applicazioni Web interattive. Se sei nuovo alla programmazione, non preoccuparti, utilizzerò un linguaggio di facile comprensione per assicurarmi che tu possa seguire ogni passaggio.

Passaggio 1: crea un progetto Vue 3

Innanzitutto, dobbiamo configurare l'ambiente di ingegneria Vue 3. Si presuppone che tu abbia installato Node.js e npm (gestore pacchetti Node).Se non è ancora installato, vai aNodeJS.org è un'organizzazione senza scopo di lucro.Scaricalo e installalo.

Apri lo strumento da riga di comando e inserisci il comando seguente per creare un nuovo progetto Vue 3:

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

Segui le istruzioni per selezionare le opzioni preimpostate di Vue 3 e attendi la creazione del progetto.

Fase due: panoramica della struttura del progetto

Una volta completata la creazione,my-ai-chat-appLa struttura base del progetto è la seguente:

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

Passaggio 3: scrivere la pagina di dialogo AI

Successivamente, scriveremo il codice principale della pagina di conversazione AI.Per prima cosa, apriamosrc/App.vuefile, questo è il nostro file componente di ingresso.

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

Questo modello è molto semplice, contiene solo un filerouter-view, che è un segnaposto per Vue Router utilizzato per eseguire il rendering dei componenti del percorso corrispondenti.

Componente ChatInput

Ora creiamo un fileChatInput.vue Componente per l'invio di messaggi.Apriresrc/components/ChatInput.vuefile e aggiungi il seguente codice:

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

Questo componente ha un modello di datimessage, contiene untext Proprietà, utilizzata per associare la casella di input.Ce n'è ancora unosendMessageMetodo utilizzato per gestire la logica di invio dei messaggi.

configurazione main.js

Infine, dobbiamo farlosrc/main.jsPresentare e utilizzare Vue Router e Vuex, nonché il nostroAppcomponenti.

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

Qui utilizziamo l'API Composition di Vue 3, throughcreateAppfunzione per creare un'istanza dell'applicazione e utilizzarlauseMetodo installato Vue Router e Vuex.

Passaggio 4: come eseguire l'applicazione Vue 3

Ora che la nostra pagina di conversazione sull'intelligenza artificiale è pronta, il passaggio successivo è come eseguirla.

1. Apri lo strumento da riga di comando e vai alla directory del tuo progetto.
2. Eseguire il comando seguente per avviare il server di sviluppo:

npm run serve

Dopo che il comando è stato eseguito, di solito vedrai il seguente output, che ti chiede di passarelocalhostIndirizzo per accedere alla tua candidatura:

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

Apri il browser e visitahttp://localhost:8080/, vedrai la pagina della conversazione AI.

Come richiedere il codice completo

Se desideri ottenere il codice completo per comprendere meglio la struttura e la logica dell'intero progetto, controllaLascia la tua email nell'area commenti。

Conclusione

Oggi abbiamo imparato come utilizzare Vue 3 per creare una semplice pagina di conversazione AI.Questa è solo un'introduzione all'effetto della pagina statica. Per quanto riguarda come accedere al modello di grandi dimensioni e realizzare la vera funzione di dialogo dell'intelligenza artificiale, consulta questo articolo che ho scritto.Come creare un'applet WeChat di dialogo AI a costo zero (codice sorgente allegato)