vue3 调用chatgpt api

您好！要在Vue3中调用ChatGPT API，您可以按照以下步骤进行操作：

1. 首先，在您的Vue3项目中安装axios库，用于发送HTTP请求。您可以使用以下命令进行安装：

npm install axios

2. 在您的Vue组件中，可以创建一个方法来调用ChatGPT API。您可以使用以下代码作为参考：

import axios from 'axios';

export default {
  data() {
    return {
      message: '',
      response: '',
    };
  },
  methods: {
    async sendMessage() {
      try {
        const response = await axios.post('https://api.example.com/chatgpt', {
          message: this.message,
        });
        this.response = response.data;
        this.message = '';
      } catch (error) {
        console.error(error);
      }
    },
  },
};

在上面的代码中，我们使用`axios.post`方法发送一个POST请求到ChatGPT API的URL，并将用户的输入消息作为请求的主体发送。API响应将被保存在`response`变量中，并在组件中显示。

请注意，您需要将`https://api.example.com/chatgpt`替换为实际的ChatGPT API URL。

3. 在Vue模板中，您可以使用`v-model`指令绑定用户输入的消息，并使用`@submit`事件监听表单提交。以下是一个示例：

<template>
  <div>
    <input v-model="message" @submit="sendMessage" />
    <button @click="sendMessage">Send</button>
    <p>{{ response }}</p>
  </div>
</template>

在上面的示例中，我们使用`v-model="message"`将用户输入的消息绑定到`message`数据属性上。当用户点击发送按钮或按下回车键时，将调用`sendMessage`方法。

这样，您就可以在Vue3中调用ChatGPT API了。请确保替换示例代码中的URL和其他细节，以适应您的实际情况。