当前位置：首页 > VUE

vue实现ai对话

2026-02-17 03:05:19VUE

Vue 实现 AI 对话功能

安装依赖

确保项目已安装 axios 或 fetch 用于 HTTP 请求，以及必要的 UI 库（如 element-ui 或自定义组件）。

npm install axios

前端界面设计

创建一个聊天界面组件，包含消息列表和输入框。以下是一个基础模板：

<template>
  <div class="chat-container">
    <div class="messages">
      <div v-for="(msg, index) in messages" :key="index" :class="['message', msg.role]">
        {{ msg.content }}
      </div>
    </div>
    <input v-model="userInput" @keyup.enter="sendMessage" placeholder="输入消息..." />
  </div>
</template>

状态管理

在 Vue 组件的 data 或 setup 中定义状态：

data() {
  return {
    messages: [],
    userInput: '',
    apiUrl: 'https://your-ai-api-endpoint.com/chat' // 替换为实际 API 地址
  }
}

调用 AI 接口

使用 axios 发送用户输入到后端或第三方 AI 服务（如 OpenAI、Azure AI）：

methods: {
  async sendMessage() {
    if (!this.userInput.trim()) return;

    const userMessage = { role: 'user', content: this.userInput };
    this.messages.push(userMessage);

    try {
      const response = await axios.post(this.apiUrl, {
        messages: this.messages
      });

      const aiMessage = { role: 'assistant', content: response.data.reply };
      this.messages.push(aiMessage);
    } catch (error) {
      console.error('API 请求失败:', error);
    }

    this.userInput = '';
  }
}

后端集成（可选）

如果需要自建后端，可使用 Node.js + Express 或 Python Flask 作为中继：

// Node.js 示例
app.post('/chat', async (req, res) => {
  const { messages } = req.body;
  const reply = await callOpenAI(messages); // 调用 OpenAI 或其他 AI 服务
  res.json({ reply });
});

样式优化

添加基础样式增强用户体验：

vue实现ai对话

.chat-container {
  max-width: 600px;
  margin: 0 auto;
}
.message {
  padding: 8px;
  margin: 4px;
  border-radius: 4px;
}
.user {
  background-color: #e3f2fd;
  text-align: right;
}
.assistant {
  background-color: #f5f5f5;
}