Построение будущих разговоров: реализация страницы чата с искусственным интеллектом на основе Vue 3 с нуля

2024-07-12

Привет всем, сегодня мы рассмотрим, как создать страницу беседы с искусственным интеллектом с нуля, используя Vue 3. Этот процесс не только позволит нам понять новые возможности Vue 3, но и даст нам новое понимание создания интерактивных веб-приложений. Если вы новичок в программировании, не волнуйтесь, я буду использовать простой для понимания язык, чтобы вы могли следовать каждому шагу.

Шаг 1. Создайте проект Vue 3.

Сначала нам нужно настроить инженерную среду Vue 3. Предполагается, что у вас установлены Node.js и npm (менеджер пакетов Node).Если он еще не установлен, перейдите в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. Напишите диалоговую страницу ИИ.

Далее мы напишем основной код страницы разговора с ИИ.Для начала давайте откроем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

Теперь, когда наша страница беседы об искусственном интеллекте готова, следующим шагом будет ее запуск.

Откройте инструмент командной строки и перейдите в каталог вашего проекта.
Выполните следующую команду, чтобы запустить сервер разработки:

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.

Как запросить полный код

Если вы хотите получить полный код, чтобы лучше понять структуру и логику всего проекта, проверьтеОставьте свой адрес электронной почты в области комментариев。

Заключение

Сегодня мы узнали, как использовать Vue 3 для создания простой страницы беседы с искусственным интеллектом.Это всего лишь введение в эффект статической страницы. О том, как получить доступ к большой модели и реализовать настоящую функцию диалога с искусственным интеллектом, прочтите эту статью, которую я написал.Как создать апплет WeChat для диалога с искусственным интеллектом без каких-либо затрат (исходный код прилагается)

Обмен технологиями