Tulevien keskustelujen rakentaminen: Vue 3:een perustuvan tekoälykeskustelusivun käyttöönotto scratch

Tulevien keskustelujen rakentaminen: Vue 3:een perustuvan AI-chat-sivun toteuttaminen tyhjästä

2024-07-12

Hei kaikki, tänään tutkimme kuinka luoda tekoälykeskustelusivu tyhjästä Vue 3:lla. Tämän prosessin avulla voimme paitsi ymmärtää Vue 3:n uusia ominaisuuksia, myös antaa meille uuden käsityksen interaktiivisten verkkosovellusten rakentamisesta. Jos olet uusi ohjelmoinnin parissa, älä huoli, käytän helposti ymmärrettävää kieltä varmistaaksesi, että pystyt seuraamaan jokaista vaihetta.

Vaihe 1: Rakenna Vue 3 -projekti

Ensinnäkin meidän on määritettävä Vue 3 -tekniikkaympäristö. Oletetaan, että sinulla on asennettuna Node.js ja npm (solmupakettien hallinta).Jos sitä ei ole vielä asennettu, siirry osoitteeseennodejs.orgLataa ja asenna se.

Avaa komentorivityökalu ja anna seuraava komento luodaksesi uuden Vue 3 -projektin:

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

Seuraa kehotteita valitaksesi Vue 3:n esiasetetut asetukset ja odota projektin luomista.

Vaihe kaksi: Hankkeen rakenteen yleiskatsaus

Kun luominen on valmis,my-ai-chat-appHankkeen perusrakenne on seuraava:

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

Vaihe 3: Kirjoita AI-dialogisivu

Seuraavaksi kirjoitamme AI-keskustelusivun ydinkoodin.Ensin avataansrc/App.vuetiedosto, tämä on merkintäkomponenttitiedostomme.


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

Tämä malli on hyvin yksinkertainen, se sisältää vain arouter-view, joka on Vue Routerin paikkamerkki, jota käytetään vastaavien reittikomponenttien hahmontamiseen.

ChatInput-komponentti

Nyt luomme aChatInput.vue Komponentti viestien lähettämiseen.Avatasrc/components/ChatInput.vuetiedosto ja lisää seuraava koodi:


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

Tällä komponentilla on tietomallimessage, sisältää atext Ominaisuus, käytetään syöttölaatikon sitomiseen.Yksi on vieläsendMessageMenetelmä, jota käytetään käsittelemään viestien lähetyslogiikkaa.

main.js-kokoonpano

Lopuksi meidän täytyysrc/main.jsEsittelyssä ja käytössä Vue Router ja Vuex sekä meidänAppkomponentit.


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

Tässä käytämme Vue 3:n Compposition API:tacreateApptoiminto sovellusesiintymän luomiseen ja käyttöönuseMenetelmä asennettu Vue Router ja Vuex.

Vaihe 4: Vue 3 -sovelluksen suorittaminen

Nyt kun tekoälykeskustelusivumme on valmis, seuraava vaihe on sen käyttäminen.

Avaa komentorivityökalu ja siirry projektihakemistoosi.
Käynnistä kehityspalvelin suorittamalla seuraava komento:

npm run serve

Kun komento on suoritettu, näet yleensä seuraavan lähdön, joka kehottaa sinua hyväksymäänlocalhostOsoite, jolla pääset hakemukseesi:

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

Avaa selain ja vierailehttp://localhost:8080/, näet tekoälykeskustelusivusi.

Kuinka pyytää koko koodi

Jos haluat saada täydellisen koodin ymmärtääksesi paremmin koko projektin rakennetta ja logiikkaa, tarkistaJätä sähköpostisi kommenttikenttään。

Johtopäätös

Tänään opimme käyttämään Vue 3:a yksinkertaisen tekoälykeskustelusivun rakentamiseen.Tämä on vain johdatus staattiseen sivuvaikutukseen. Katso tästä kirjoittamastani artikkelista, kuinka pääset käyttämään suurta mallia ja toteuttamaan todellinen AI-dialogitoiminto.AI-dialogin WeChat-sovelman luominen ilman kustannuksia (lähdekoodi liitteenä)

Teknologian jakaminen