当前位置：首页 > VUE

vue实现ai问答

2026-03-08 18:56:02VUE

Vue 实现 AI 问答功能

搭建基础 Vue 项目

使用 Vue CLI 或 Vite 创建一个新项目，安装必要的依赖如 axios 用于 HTTP 请求。确保项目结构清晰，包含组件、API 调用和状态管理（可选 Pinia 或 Vuex）。

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

集成 AI 接口

选择 AI 服务提供商（如 OpenAI、Azure AI 或本地模型 API），通过 axios 调用其问答接口。示例使用 OpenAI：

// src/api/aiService.js
import axios from 'axios';

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

export const askAI = async (prompt) => {
  const response = await axios.post(API_URL, {
    model: "gpt-3.5-turbo",
    messages: [{ role: "user", content: prompt }]
  }, {
    headers: {
      'Authorization': `Bearer ${OPENAI_KEY}`,
      'Content-Type': 'application/json'
    }
  });
  return response.data.choices[0].message.content;
};

构建问答组件

创建交互式组件，包含输入框、发送按钮和回答显示区域。使用 v-model 绑定输入数据，调用 AI 接口并显示结果。

<!-- src/components/AIChat.vue -->
<template>
  <div class="ai-chat">
    <textarea v-model="userInput" placeholder="输入问题..."></textarea>
    <button @click="submitQuestion">发送</button>
    <div class="response">{{ aiResponse }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { askAI } from '@/api/aiService';

const userInput = ref('');
const aiResponse = ref('');

const submitQuestion = async () => {
  if (!userInput.value.trim()) return;
  aiResponse.value = "思考中...";
  try {
    aiResponse.value = await askAI(userInput.value);
  } catch (error) {
    aiResponse.value = "请求失败: " + error.message;
  }
};
</script>

优化用户体验

添加加载状态、错误处理和历史记录功能。使用 CSS 美化界面，增加过渡动画提升交互体验。

/* src/components/AIChat.vue scoped styles */
.ai-chat {
  max-width: 600px;
  margin: 0 auto;
}
textarea {
  width: 100%;
  min-height: 80px;
}
.response {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #eee;
  min-height: 100px;
}