le mie informazioni di contatto
Posta[email protected]
2024-07-12
한어Русский язык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.
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.
Una volta completata la creazione,my-ai-chat-app
La 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
Successivamente, scriveremo il codice principale della pagina di conversazione AI.Per prima cosa, apriamosrc/App.vue
file, 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.
Ora creiamo un fileChatInput.vue
Componente per l'invio di messaggi.Apriresrc/components/ChatInput.vue
file 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 unosendMessage
Metodo utilizzato per gestire la logica di invio dei messaggi.
Infine, dobbiamo farlosrc/main.js
Presentare e utilizzare Vue Router e Vuex, nonché il nostroApp
componenti.
- 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, throughcreateApp
funzione per creare un'istanza dell'applicazione e utilizzarlause
Metodo installato Vue Router e Vuex.
Ora che la nostra pagina di conversazione sull'intelligenza artificiale è pronta, il passaggio successivo è come eseguirla.
npm run serve
Dopo che il comando è stato eseguito, di solito vedrai il seguente output, che ti chiede di passarelocalhost
Indirizzo 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.
Se desideri ottenere il codice completo per comprendere meglio la struttura e la logica dell'intero progetto, controllaLascia la tua email nell'area commenti。
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)