Κοινή χρήση τεχνολογίας

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

Γεια σε όλους, σήμερα θα εξερευνήσουμε πώς να δημιουργήσουμε μια σελίδα συνομιλίας AI από την αρχή χρησιμοποιώντας το Vue 3. Αυτή η διαδικασία όχι μόνο θα μας επιτρέψει να κατανοήσουμε τις νέες δυνατότητες του Vue 3, αλλά θα μας δώσει επίσης μια νέα κατανόηση της δημιουργίας διαδραστικών εφαρμογών ιστού. Εάν είστε νέος στον προγραμματισμό, μην ανησυχείτε, θα χρησιμοποιήσω γλώσσα κατανοητή για να βεβαιωθώ ότι μπορείτε να ακολουθήσετε κάθε βήμα.

Βήμα 1: Δημιουργήστε ένα έργο Vue 3

Πρώτα, πρέπει να ρυθμίσουμε το περιβάλλον μηχανικής Vue 3. Υποτίθεται ότι έχετε εγκαταστήσει το Node.js και το npm (Διαχείριση πακέτων κόμβου).Εάν δεν έχει εγκατασταθεί ακόμα, μεταβείτε στοnodejs.orgΚατεβάστε και εγκαταστήστε το.

Ανοίξτε το εργαλείο γραμμής εντολών και εισαγάγετε την ακόλουθη εντολή για να δημιουργήσετε ένα νέο έργο Vue 3:

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

Ακολουθήστε τις οδηγίες για να επιλέξετε τις προκαθορισμένες επιλογές του Vue 3 και περιμένετε να δημιουργηθεί το έργο.

Βήμα δεύτερο: Επισκόπηση της δομής του έργου

Αφού ολοκληρωθεί η δημιουργία,my-ai-chat-appΗ βασική δομή του έργου έχει ως εξής:

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

Βήμα 3: Γράψτε τη σελίδα διαλόγου AI

Στη συνέχεια, θα γράψουμε τον βασικό κώδικα της σελίδας συνομιλίας AI.Αρχικά, ας ανοίξουμεsrc/App.vueαρχείο, αυτό είναι το αρχείο συνιστωσών εισόδου μας.

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

Αυτό το πρότυπο είναι πολύ απλό, περιέχει μόνο έναrouter-view, το οποίο είναι ένα σύμβολο κράτησης θέσης για το Vue Router που χρησιμοποιείται για την απόδοση αντιστοιχιζόμενων στοιχείων διαδρομής.

Συστατικό ChatInput

Τώρα, δημιουργούμε έναChatInput.vue Εξάρτημα για την αποστολή μηνυμάτων.Ανοιξεsrc/components/ChatInput.vueαρχείο και προσθέστε τον ακόλουθο κώδικα:

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

Αυτό το στοιχείο έχει ένα μοντέλο δεδομένωνmessage, περιέχει αtext Ιδιότητα, που χρησιμοποιείται για τη σύνδεση του πλαισίου εισόδου.Υπάρχει ακόμα έναsendMessageΜέθοδος που χρησιμοποιείται για τον χειρισμό της λογικής της αποστολής μηνυμάτων.

διαμόρφωση main.js

Τέλος, πρέπειsrc/main.jsΕισαγάγετε και χρησιμοποιήστε το Vue Router και το Vuex, καθώς και το δικό μαςAppσυστατικά.

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

Εδώ χρησιμοποιούμε το Composition API του Vue 3, μέσωcreateAppλειτουργία για τη δημιουργία μιας παρουσίας εφαρμογής και τη χρήσηuseΜέθοδος εγκατάστασης Vue Router και Vuex.

Βήμα 4: Πώς να εκτελέσετε την εφαρμογή Vue 3

Τώρα που η σελίδα συνομιλίας μας με AI είναι έτοιμη, το επόμενο βήμα είναι πώς να την εκτελέσετε.

1. Ανοίξτε το εργαλείο γραμμής εντολών και μεταβείτε στον κατάλογο του έργου σας.
2. Εκτελέστε την ακόλουθη εντολή για να ξεκινήσετε τον διακομιστή ανάπτυξης:

npm run serve

Αφού εκτελεστεί η εντολή, θα δείτε συνήθως την ακόλουθη έξοδο, που σας ζητά να περάσετεlocalhostΔιεύθυνση πρόσβασης στην αίτησή σας:

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

Ανοίξτε το πρόγραμμα περιήγησής σας και επισκεφθείτεhttp://localhost:8080/, θα δείτε τη σελίδα συνομιλίας AI σας.

Πώς να ζητήσετε τον πλήρη κωδικό

Εάν θέλετε να λάβετε τον πλήρη κώδικα για να κατανοήσετε καλύτερα τη δομή και τη λογική ολόκληρου του έργου, ελέγξτεΑφήστε το email σας στην περιοχή σχολίων。

συμπέρασμα

Σήμερα μάθαμε πώς να χρησιμοποιούμε το Vue 3 για να δημιουργήσουμε μια απλή σελίδα συνομιλίας AI.Αυτή είναι απλώς μια εισαγωγή στο εφέ στατικής σελίδας Σχετικά με τον τρόπο πρόσβασης στο μεγάλο μοντέλο και την πραγματοποίηση της πραγματικής λειτουργίας διαλόγου AI, δείτε αυτό το άρθρο που έγραψα.Πώς να δημιουργήσετε μια μικροεφαρμογή WeChat διαλόγου AI με μηδενικό κόστος (επισυνάπτεται ο πηγαίος κώδικας)