Vue.js 集成 ChatGPT：详细教程和代码示例

首先，ChatGPT 是一款由 OpenAI 开发的强大聊天机器人模型，它可以通过 API 接口进行调用。因此，我们需要在 Vue 项目中调用该 API 接口。

首先，在 Vue 项目中安装 axios 库，用于发送 HTTP 请求：

npm install axios --save

在 Vue 的组件中，通过 axios 发送 HTTP 请求调用 ChatGPT 的 API 接口，例如：

import axios from 'axios';

export default {
  data() {
    return {
      message: '',
      chatHistory: []
    }
  },
  methods: {
    async sendMessage() {
      const response = await axios.post('https://api.openai.com/v1/chat/completions', { // 使用 OpenAI 的官方 API 接口
        model: 'gpt-3.5-turbo', // 选择 ChatGPT 模型
        messages: [ // 聊天消息列表
          { role: 'user', content: this.message },
          ...this.chatHistory.map(item => ({ role: 'assistant', content: item }))
        ],
        temperature: 0.7 // 温度参数，控制生成文本的随机程度
      }, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer YOUR_API_KEY` // 替换为您的 API 密钥
        }
      });
      this.chatHistory.push(response.data.choices[0].message.content); // 获取 ChatGPT 的回复
      this.message = '';
    }
  }
}

在上面的代码中，我们使用了 axios 库发送了一个 POST 请求到 OpenAI 的官方 ChatGPT API 接口，传入的参数包括用户输入的文本消息、历史聊天记录、模型选择、温度参数以及 API 密钥。接口返回的结果也被存储到了组件的 data 属性中，用于在页面上展示聊天记录。

需要注意的是，为了使用 ChatGPT 的 API 接口，我们需要先获取 API Key，可以在 OpenAI 的官网上注册账号并申请 API Key。