当前位置：首页 > VUE

vue实现ai问答

2026-01-16 05:32:42VUE

Vue 实现 AI 问答功能

1. 搭建基础 Vue 项目

使用 Vue CLI 或 Vite 创建一个新项目，安装必要依赖（如 axios 用于 HTTP 请求）：

npm create vue@latest ai-qa-app
cd ai-qa-app
npm install axios

2. 设计问答界面组件

创建 ChatWindow.vue 组件，包含输入框和消息展示区域：

<template>
  <div class="chat-container">
    <div class="messages">
      <div v-for="(msg, index) in messages" :key="index">
        {{ msg.sender }}: {{ msg.text }}
      </div>
    </div>
    <input v-model="userInput" @keyup.enter="sendMessage" />
  </div>
</template>

3. 集成 AI 接口

调用 OpenAI API 或其他 AI 服务（需申请 API key）：

vue实现ai问答

import axios from 'axios';

const API_KEY = 'your-api-key';
const API_URL = 'https://api.openai.com/v1/chat/completions';

async function getAIResponse(prompt) {
  const response = await axios.post(API_URL, {
    model: "gpt-3.5-turbo",
    messages: [{ role: "user", content: prompt }]
  }, {
    headers: { Authorization: `Bearer ${API_KEY}` }
  });
  return response.data.choices[0].message.content;
}

4. 实现对话逻辑

在组件中管理对话状态和处理用户输入：

data() {
  return {
    messages: [],
    userInput: ''
  }
},
methods: {
  async sendMessage() {
    this.messages.push({ sender: 'You', text: this.userInput });
    const aiResponse = await getAIResponse(this.userInput);
    this.messages.push({ sender: 'AI', text: aiResponse });
    this.userInput = '';
  }
}

5. 添加样式优化体验

为聊天界面添加基础样式：

vue实现ai问答

.chat-container {
  max-width: 600px;
  margin: 0 auto;
}
.messages {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
}

6. 部署与优化

考虑添加以下增强功能：