Membangun percakapan masa depan: Menerapkan halaman obrolan AI berdasarkan Vue 3 dari scratch

Membangun percakapan masa depan: Menerapkan halaman obrolan AI berdasarkan Vue 3 dari awal

2024-07-12

Halo semuanya, hari ini kita akan mempelajari cara membuat halaman percakapan AI dari awal menggunakan Vue 3. Proses ini tidak hanya membuat kita memahami fitur-fitur baru Vue 3, namun juga memberi kita pemahaman baru dalam membangun aplikasi web interaktif. Jika Anda baru mengenal pemrograman, jangan khawatir, saya akan menggunakan bahasa yang mudah dipahami untuk memastikan Anda dapat mengikuti setiap langkahnya.

Langkah 1: Bangun proyek Vue 3

Pertama, kita perlu menyiapkan lingkungan teknik Vue 3. Diasumsikan Anda telah menginstal Node.js dan npm (Manajer paket Node).Jika belum diinstal, bukanode.js.orgUnduh dan instal.

Buka alat baris perintah Anda dan masukkan perintah berikut untuk membuat proyek Vue 3 baru:

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

Ikuti petunjuk untuk memilih opsi preset Vue 3 dan tunggu hingga proyek dibuat.

Langkah Kedua: Ikhtisar Struktur Proyek

Setelah pembuatan selesai,my-ai-chat-appStruktur dasar proyek ini adalah sebagai berikut:

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

Langkah 3: Tulis halaman dialog AI

Selanjutnya kita akan menulis kode inti halaman percakapan AI.Pertama, mari kita bukasrc/App.vuefile, ini adalah file komponen entri kami.


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

Template ini sangat sederhana, hanya berisi arouter-view, yang merupakan placeholder untuk Vue Router yang digunakan untuk merender komponen rute yang cocok.

Komponen Input Obrolan

Sekarang, kita membuat aChatInput.vue Komponen untuk mengirim pesan.Membukasrc/components/ChatInput.vuefile dan tambahkan kode berikut:


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

Komponen ini memiliki model datamessage, berisi atext Properti, digunakan untuk mengikat kotak input.Masih ada satusendMessageMetode, digunakan untuk menangani logika pengiriman pesan.

konfigurasi main.js

Akhirnya, kita perlu melakukannyasrc/main.jsPerkenalkan dan gunakan Vue Router dan Vuex, serta milik kamiAppkomponen.


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

Di sini kita menggunakan Composition API dari Vue 3, melaluicreateAppberfungsi untuk membuat instance aplikasi dan menggunakannyauseMetode menginstal Vue Router dan Vuex.

Langkah 4: Cara menjalankan aplikasi Vue 3 Anda

Sekarang halaman percakapan AI kita sudah siap, langkah selanjutnya adalah bagaimana menjalankannya.

Buka alat baris perintah dan navigasikan ke direktori proyek Anda.
Jalankan perintah berikut untuk memulai server pengembangan:

npm run serve

Setelah perintah dijalankan, Anda biasanya akan melihat keluaran berikut, meminta Anda untuk meneruskanlocalhostAlamat untuk mengakses aplikasi Anda:

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

Buka browser Anda dan kunjungihttp://localhost:8080/, Anda akan melihat halaman percakapan AI Anda.

Cara request kode lengkapnya

Jika Anda ingin mendapatkan kode lengkap untuk lebih memahami struktur dan logika keseluruhan proyek, silakan periksaTinggalkan email Anda di kolom komentar。

Kesimpulan

Hari ini kita mempelajari cara menggunakan Vue 3 untuk membuat halaman percakapan AI sederhana.Ini hanyalah pengenalan efek halaman statis. Mengenai cara mengakses model besar dan mewujudkan fungsi dialog AI yang sebenarnya, silakan lihat artikel yang saya tulis ini.Cara membuat applet WeChat dialog AI tanpa biaya (kode sumber terlampir)

Berbagi teknologi