1.获取ChatGPT API密钥

首先，需要获得ChatGPT的API密钥。可以前往OpenAI的官方网站创建一个账号，然后在账号设置中生成一个API密钥。如果还没有OpenAI账号，可以前往openAI官网 注册一个,注册教程网上现在有很多我就不赘述了。

2.创建vue项目

安装vueCLi，然后使用它创建一个新的Vue项目，我这里使用的是npm命令安装：

npm install -g @vue/cli
vue create my-app
cd my-app

3.安装axios

在Vue项目中，我们可以使用axios来发起HTTP请求。我们需要使用以下命令来安装axios：

npm install axios

4.创建ChatGPT服务

我们将创建一个JavaScript模块，该模块将包含与ChatGPT API的所有通信。在您的Vue项目中，创建一个名为chatgpt.js的新文件，并在其中添加以下代码：

import axios from 'axios';

const API_KEY = 'your_api_key_here';//替换成你申请的open AI key
const MODEL = 'text-davinci-002';//使用的语言模型

const api = axios.create({
  baseURL: 'https://api.openai.com/v1/',
  headers: {
    Authorization: `Bearer ${API_KEY}`,
    'Content-Type': 'application/json',
  },
});

async function generateText(prompt) {
  const response = await api.post('/engines/text-davinci-002/completions', {
    prompt: prompt,//问的问题
    max_tokens: 1024,
    n: 1,
    stop: '\n',
  });
  return response.data.choices[0].text.trim();
}

export default {
  generateText,
};

在这个文件中，我们创建了一个axios实例，并将我们的API密钥和模型ID添加到请求头中。然后，我们定义了一个名为generateText的异步函数，该函数将一个prompt作为参数，并将其发送到ChatGPT API中。API将生成一段文本并将其返回给我们，我们将其返回到我们的Vue组件中。

5.使用ChatGPT服务

在Vue组件中，我们可以导入chatgpt.js模块并使用它来生成文本。在这个示例中，我们将创建一个名为GptTextGenerator的Vue组件。组件将包含一个文本输入框和一个按钮，当我们点击按钮时，它将调用ChatGPT API并将生成的文本显示在屏幕上。

<template>
  <div>
    <input v-model="prompt" type="text" placeholder="Enter prompt" />
    <button @click="generateText">Generate Text</button>
    <p>{{ generatedText }}</p>
  </div>
</template>

<script>
import ChatGPT from '@/services/chatgpt';

export default {
  name: 'GptTextGenerator',
  data() {
    return {
      prompt: '',
      generatedText: '',
    };
  },
  methods: {
    async generateText() {
      this.generatedText = await ChatGPT.generateText(this.prompt);
    },
  },
};
</script>

6.总结

现在一个简单的接入gpt的vue项目就开发完成了。我们现在可以和它聊天了或使用它进行一些简单的代码查错，或使用他寻找解决bug的思路。目前官网提供了图片、文本、聊天、语音识别等多个模型，如果想深入了解，可以前往OpenAi官网查看更多的文档和示例。