chat gpt用vue实现

Vue 实现 ChatGPT 的步骤

创建 Vue 项目

使用 Vue CLI 或 Vite 创建一个新的 Vue 项目。以下是使用 Vue CLI 的示例命令：

vue create chatgpt-app

安装依赖

安装必要的依赖，包括 OpenAI 的官方库或 HTTP 客户端（如 Axios）用于与 ChatGPT API 交互：

npm install openai axios

配置 OpenAI API

在项目中创建一个配置文件（如 src/config.js）存储 API 密钥：

export const OPENAI_API_KEY = 'your-api-key';

创建聊天组件

新建一个 Vue 组件（如 src/components/ChatWindow.vue），包含输入框和聊天记录展示区域：

<template>
  <div>
    <div v-for="(message, index) in messages" :key="index">
      {{ message.role }}: {{ message.content }}
    </div>
    <input v-model="inputText" @keyup.enter="sendMessage" />
  </div>
</template>

<script>
import axios from 'axios';
import { OPENAI_API_KEY } from '../config';

export default {
  data() {
    return {
      inputText: '',
      messages: []
    };
  },
  methods: {
    async sendMessage() {
      const userMessage = { role: 'user', content: this.inputText };
      this.messages.push(userMessage);
      this.inputText = '';

      const response = await axios.post(
        'https://api.openai.com/v1/chat/completions',
        {
          model: 'gpt-3.5-turbo',
          messages: this.messages
        },
        {
          headers: {
            'Authorization': `Bearer ${OPENAI_API_KEY}`,
            'Content-Type': 'application/json'
          }
        }
      );

      const assistantMessage = {
        role: 'assistant',
        content: response.data.choices[0].message.content
      };
      this.messages.push(assistantMessage);
    }
  }
};
</script>

集成到主应用

在 src/App.vue 中引入并使用聊天组件：

<template>
  <div id="app">
    <ChatWindow />
  </div>
</template>

<script>
import ChatWindow from './components/ChatWindow.vue';

export default {
  components: { ChatWindow }
};
</script>

运行项目

启动开发服务器测试功能：

npm run serve

样式优化

根据需要添加 CSS 样式美化聊天界面，例如：

<style scoped>
#app {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 0 auto;
}
input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
}
</style>

注意事项

• API 密钥需妥善保管，避免前端直接暴露敏感信息时，建议通过后端服务中转请求。
• 可扩展功能如历史会话保存、多轮对话上下文管理等。
• 生产环境需处理错误情况（如网络请求失败、API 限制等）。