从零开始：如何轻松将ChatGPT集成到你的Vue项目中！精华

发布于 2025-3-18 08:38

浏览

0收藏

在当今快速发展的互联网时代，人工智能（AI）已经渗透到我们生活的各个方面。作为前端开发者，如何将强大的ChatGPT功能集成到Vue项目中，成为了许多人关注的焦点。今天，我将带你一步步完成这一过程，让你的应用具备智能对话功能，提升用户体验！✨

一、项目准备：打造坚实的基础

在开始之前，我们需要做好充分的准备工作，确保项目顺利进行。

1. 搭建Vue项目环境

首先，确保你的电脑已经安装了Node.js和npm（Node Package Manager）。如果还没有安装，可以前往Node.js官网下载并安装最新版本。

安装完成后，打开命令行工具，使用以下命令创建一个新的Vue项目：

vue create chatgpt-vue-app1.

在安装过程中，你会被询问选择项目配置。根据需求选择是否使用TypeScript、路由、状态管理等功能。创建完成后，进入项目目录：

cd chatgpt-vue-app1.

2. 获取OpenAI API Key

要使用ChatGPT，你需要一个OpenAI的API Key。前往我之前写的CSDN文章查看教程：

【OpenAI】获取OpenAI API Key的多种方式全攻略：从入门到精通，再到详解教程！！：https://blog.csdn.net/zhouzongxin94/article/details/144021130

二、安装依赖：为项目增添动力

在Vue项目中，我们需要安装一些必要的库，以便与ChatGPT进行通信。其中，axios是一个常用的HTTP请求库。

在项目根目录下，运行以下命令安装axios：

npm install axios1.

安装完成后，项目环境已经准备就绪，可以开始集成ChatGPT了！

三、在Vue组件中调用ChatGPT：实现智能对话

接下来，我们将在Vue项目中创建一个组件，用于与ChatGPT进行交互。

1. 创建ChatGPT组件

在src/components目录下，新建一个名为ChatGPT.vue的文件，并添加以下内容：

<template>
  <div class="chat-container">
    <h2>🤖 ChatGPT 智能助手</h2>
    <input v-model="userInput" placeholder="请输入你的问题" />
    <button @click="sendQuestion">发送问题</button>
    <div v-if="response" class="response">
      <strong>ChatGPT:</strong> {{ response }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userInput: '',
      response: null,
      conversationHistory: []
    };
  },
  methods: {
    async sendQuestion() {
      if (!this.userInput.trim()) {
        alert('请输入有效的问题！');
        return;
      }

      try {
        const apiKey = 'YOUR_API_KEY'; // 替换为你自己的OpenAI API Key
        const prompt = this.userInput;

        // 构建对话消息
        let messages = [{"role": "user", "content": prompt}];
        if (this.conversationHistory.length > 0) {
          messages = this.conversationHistory.concat(messages);
        }

        // 发送请求到OpenAI API
        const response = await axios.post(
          'https://api.openai.com/v1/chat/completions',
          {
            model: "gpt-3.5-turbo",
            messages: messages
          },
          {
            headers: {
              'Authorization': `Bearer ${apiKey}`,
              'Content-Type': 'application/json'
            }
          }
        );

        // 更新对话历史
        const assistantMessage = response.data.choices[0].message.content;
        this.conversationHistory = messages.concat([{"role": "assistant", "content": assistantMessage}]);
        this.response = assistantMessage;
        this.userInput = ''; // 清空输入框
      } catch (error) {
        console.error(error);
        this.response = '请求出现错误，请稍后再试。';
      }
    }
  }
};
</script>

<style scoped>
.chat-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fafafa;
}

input {
  width: 80%;
  padding: 10px;
  margin-right: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #42b983;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #369870;
}

.response {
  margin-top: 20px;
  padding: 10px;
  background-color: #e0f7fa;
  border-radius: 5px;
}
</style>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.

2. 解析组件结构

**模板部分 (template)**：

一个输入框用于用户输入问题。
一个按钮用于发送问题。
一个用于展示ChatGPT回复的区域，仅在有回复时显示。

**脚本部分 (script)**：
引入axios库，用于发送HTTP请求。
定义了userInput（用户输入）、response（ChatGPT回复）和conversationHistory（对话历史）三个数据属性。
sendQuestion方法负责处理用户输入、发送请求并更新对话历史。
**样式部分 (style)**：
基本的样式设计，提升用户界面的美观性和用户体验。

3. 在Vue应用中使用ChatGPT组件

打开src/App.vue文件，引入并使用刚刚创建的ChatGPT组件：

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

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

export default {
  name: 'App',
  components: {
    ChatGPT
  }
};
</script>

<style>
/* 可以添加全局样式 */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}
</style>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

4. 运行项目

一切准备就绪后，返回命令行，运行以下命令启动Vue项目：

npm run serve1.

打开浏览器，访问http://localhost:8080（具体端口可能因配置不同而异），即可看到ChatGPT智能助手的界面。输入问题，点击发送，即可与ChatGPT进行对话交流！

四、扩展功能与优化：让应用更上一层楼

集成ChatGPT只是第一步，为了提升用户体验，还可以进行以下优化和功能扩展。

1. 实现多轮对话功能

多轮对话能够让应用与用户进行更自然、更智能的交流。我们已经在组件中添加了conversationHistory来存储对话历史，但可以进一步优化：

保存对话历史：确保对话历史不会因页面刷新而丢失，可以考虑使用本地存储（LocalStorage）来保存。
管理对话上下文：限制对话历史的长度，避免发送过长的消息数组导致性能问题。

修改sendQuestion方法，添加对话历史的管理：

methods: {
  async sendQuestion() {
    if (!this.userInput.trim()) {
      alert('请输入有效的问题！');
      return;
    }

    try {
      const apiKey = 'YOUR_API_KEY'; // 替换为你自己的OpenAI API Key
      const prompt = this.userInput;

      // 从本地存储获取对话历史
      let messages = JSON.parse(localStorage.getItem('conversationHistory')) || [];
      messages.push({"role": "user", "content": prompt});

      // 发送请求到OpenAI API
      const response = await axios.post(
        'https://api.openai.com/v1/chat/completions',
        {
          model: "gpt-3.5-turbo",
          messages: messages
        },
        {
          headers: {
            'Authorization': `Bearer ${apiKey}`,
            'Content-Type': 'application/json'
          }
        }
      );

      // 获取ChatGPT回复并更新对话历史
      const assistantMessage = response.data.choices[0].message.content;
      messages.push({"role": "assistant", "content": assistantMessage});
      this.conversationHistory = messages;
      this.response = assistantMessage;
      this.userInput = ''; // 清空输入框

      // 将对话历史保存到本地存储
      localStorage.setItem('conversationHistory', JSON.stringify(messages));
    } catch (error) {
      console.error(error);
      this.response = '请求出现错误，请稍后再试。';
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

2. 添加加载动画与错误提示

为了提升用户体验，可以在请求发送过程中显示加载动画，并在出现错误时给出明确提示。

修改模板部分，添加加载状态和错误提示：

<template>
  <div class="chat-container">
    <h2>🤖 ChatGPT 智能助手</h2>
    <input v-model="userInput" placeholder="请输入你的问题" />
    <button @click="sendQuestion" :disabled="isLoading">发送问题</button>
    <div v-if="isLoading" class="loading">⏳ 正在生成回答...</div>
    <div v-if="response" class="response">
      <strong>ChatGPT:</strong> {{ response }}
    </div>
    <div v-if="error" class="error">{{ error }}</div>
  </div>
</template>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

在脚本部分，添加isLoading和error数据属性，并更新sendQuestion方法：

data() {
  return {
    userInput: '',
    response: null,
    conversationHistory: [],
    isLoading: false,
    error: null
  };
},
methods: {
async sendQuestion() {
    if (!this.userInput.trim()) {
      alert('请输入有效的问题！');
      return;
    }

    this.isLoading = true;
    this.error = null;

    try {
      const apiKey = 'YOUR_API_KEY'; // 替换为你自己的OpenAI API Key
      const prompt = this.userInput;

      // 从本地存储获取对话历史
      let messages = JSON.parse(localStorage.getItem('conversationHistory')) || [];
      messages.push({"role": "user", "content": prompt});

      // 发送请求到OpenAI API
      const response = await axios.post(
        'https://api.openai.com/v1/chat/completions',
        {
          model: "gpt-3.5-turbo",
          messages: messages
        },
        {
          headers: {
            'Authorization': `Bearer ${apiKey}`,
            'Content-Type': 'application/json'
          }
        }
      );

      // 获取ChatGPT回复并更新对话历史
      const assistantMessage = response.data.choices[0].message.content;
      messages.push({"role": "assistant", "content": assistantMessage});
      this.conversationHistory = messages;
      this.response = assistantMessage;
      this.userInput = ''; // 清空输入框

      // 将对话历史保存到本地存储
      localStorage.setItem('conversationHistory', JSON.stringify(messages));
    } catch (error) {
      console.error(error);
      this.error = '请求出现错误，请稍后再试。';
    } finally {
      this.isLoading = false;
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.

在样式部分，添加加载和错误提示的样式：

.loading {
  margin-top: 20px;
  color: #ff9800;
}

.error {
  margin-top: 20px;
  color: #f44336;
}1.
2.
3.
4.
5.
6.
7.
8.
9.

3. 添加清除对话历史功能

为了让用户能够清除对话历史，提升体验，可以添加一个“清除聊天”按钮。

在模板部分，添加按钮：

<button @click="clearHistory" :disabled="isLoading">清除聊天</button>1.

在脚本部分，添加clearHistory方法：

methods: {
  // ...已有方法

  clearHistory() {
    this.conversationHistory = [];
    localStorage.removeItem('conversationHistory');
    this.response = null;
    this.userInput = '';
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

并在样式中调整按钮布局：

button {
margin-top: 10px;
padding: 10px20px;
/* 其他样式保持不变 */
}

button + button {
margin-left: 10px;
background-color: #f44336;
}

button + button:hover {
background-color: #d32f2f;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

4. 输入验证与限制

为了避免用户输入过长或不合法的内容，可以在发送问题前进行验证和限制。

修改sendQuestion方法，添加输入长度限制：

methods: {
  async sendQuestion() {
    const trimmedInput = this.userInput.trim();
    if (!trimmedInput) {
      alert('请输入有效的问题！');
      return;
    }

    if (trimmedInput.length > 500) {
      alert('问题太长，请限制在500字以内。');
      return;
    }

    // 继续执行发送问题的逻辑
    // ...
  },
// 其他方法保持不变
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

五、提升应用性能与用户体验

在完成基本功能后，我们还可以通过以下方式进一步优化应用。

1. 优化API调用

为了避免频繁调用API，可以设置防抖（debounce）机制，限制用户发送问题的频率。例如，用户在短时间内频繁点击发送按钮时，仅保留最后一次点击。

可以使用lodash库中的debounce函数实现：

npm install lodash1.

在组件中引入并应用：

import { debounce } from 'lodash';

export default {
  // ...已有内容
  created() {
    this.sendQuestion = debounce(this.sendQuestion, 1000);
  },
  // ...其他内容
}1.
2.
3.
4.
5.
6.
7.
8.
9.

这样，每次调用sendQuestion方法时，会有1秒的间隔，防止过于频繁的请求。

2. 响应式设计

确保应用在不同设备上都有良好的显示效果，采用响应式设计。

在样式部分，添加媒体查询：

.chat-container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
background-color: #fafafa;
}

@media (max-width:768px) {
.chat-container {
    margin: 20px;
    padding: 15px;
  }

input {
    width: 100%;
    margin-bottom: 10px;
  }

button {
    width: 100%;
    margin-bottom: 10px;
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

3. 美化界面

通过进一步美化界面，使应用更加吸引人。可以使用CSS框架如Bootstrap或Element UI，也可以自定义样式。

例如，使用渐变背景和卡片式设计：

.chat-container {
max-width: 600px;
margin: 50px auto;
padding: 30px;
border-radius: 15px;
background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
box-shadow: 04px6pxrgba(0, 0, 0, 0.1);
}

h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}

.input-group {
display: flex;
flex-direction: column;
}

input {
padding: 12px;
border-radius: 8px;
border: 1px solid #ccc;
margin-bottom: 10px;
font-size: 16px;
}

button {
padding: 12px;
border: none;
border-radius: 8px;
background-color: #42b983;
color: white;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #369870;
}

.response, .loading, .error {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
font-size: 16px;
}

.response {
background-color: #e0f7fa;
}

.loading {
color: #ff9800;
}

.error {
background-color: #ffebee;
color: #f44336;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.

❝
💥 VSvode-大模型AI工具👇🏻🌟🌟 -【CodeMoss】集成了13种GPT大模型（包含GPT4、o1等）、提示词助手100+、支持Open API调用、自定义助手、文件上传等强大功能，助您提升工作效率！

六、总结

通过以上步骤，我们成功将ChatGPT集成到了Vue项目中，实现了一个功能完备的智能对话应用。从项目准备、依赖安装，到组件开发、功能扩展，再到性能优化和用户体验提升，每一步都为最终的成果打下了坚实的基础。

本文转载自爱学习的蝌蚪，作者：hpstram

标签

ChatGPT

Vue

项目

51CTO

51CTO博客

51CTO学堂

从零开始：如何轻松将ChatGPT集成到你的Vue项目中！精华

一、项目准备：打造坚实的基础

1. 搭建Vue项目环境

2. 获取OpenAI API Key

二、安装依赖：为项目增添动力

三、在Vue组件中调用ChatGPT：实现智能对话

1. 创建ChatGPT组件

2. 解析组件结构

3. 在Vue应用中使用ChatGPT组件

4. 运行项目

四、扩展功能与优化：让应用更上一层楼

1. 实现多轮对话功能

2. 添加加载动画与错误提示

3. 添加清除对话历史功能

4. 输入验证与限制

五、提升应用性能与用户体验

1. 优化API调用

2. 响应式设计

3. 美化界面

六、总结

目录

51CTO

51CTO博客

51CTO学堂

从零开始：如何轻松将ChatGPT集成到你的Vue项目中！ 精华

一、项目准备：打造坚实的基础

1. 搭建Vue项目环境

2. 获取OpenAI API Key

二、安装依赖：为项目增添动力

三、在Vue组件中调用ChatGPT：实现智能对话

1. 创建ChatGPT组件

2. 解析组件结构

3. 在Vue应用中使用ChatGPT组件

4. 运行项目

四、扩展功能与优化：让应用更上一层楼

1. 实现多轮对话功能

2. 添加加载动画与错误提示

3. 添加清除对话历史功能

4. 输入验证与限制

五、提升应用性能与用户体验

1. 优化API调用

2. 响应式设计

3. 美化界面

六、总结

目录

从零开始：如何轻松将ChatGPT集成到你的Vue项目中！精华