在當今數字化時代，AI 技術正逐漸融入我們的生活。本專案將帶領您使用 Vue 框架，以簡潔高效的方式實現一個令人驚歎的 AI 頁面。透過深入淺出的步驟和清晰的程式碼示例，即使您是 Vue 的初學者，也能輕鬆掌握其中的奧秘，為您開啟通往 AI 與前端互動的精彩之旅。
開始前的準備：node環境，vue3（包含路由），tailwindcss css，chatgpt的網站以及api。 node環境可以參考這個教程：(blog.csdn.net/Nicolecocol…)
vue3的npm的安裝命令：
初始化專案 npm init -y
安裝 Vite npm init vite
在後續的選擇中選擇vue -> JavaScript
tailwindcss css的npm安裝
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
chatgpt網站： api.302.ai/v1/chat/com…
開幹
所需檔案及位置 
**tailwind.css檔案的內容
**
@tailwind base; //匯入 Tailwind CSS 的基礎樣式，這些通常是一些重置和預設 //的樣式設定，用於確保在不同瀏覽器中的一致性和基本的樣式表現。 @tailwind components; //匯入可能自定義的元件相關的樣式。這部分通常用於覆蓋或擴充套件 //Tailwind 提供的預設元件樣式，或者引入您自己定義的基於 Tailwind 類的元件樣式。 @tailwind utilities; //匯入 Tailwind 的實用工具類，這包含了各種常見的樣式類，如 //間距、字型大小、顏色、陰影等，可以直接應用於 HTML 元素來快速實現各種樣式效果。
當然您也可以用原生css，這些都是指提供頁面的樣式
gpt.js裡面的的內容
export const chat = async (messages, apiKey) => {
// 定義一個名為 chat 的非同步函式，接收訊息陣列 messages 和 API 金鑰 apiKey 作為引數
try {
// 嘗試執行以下程式碼
const result = await fetch("https://api.302.ai/v1/chat/completions", {
// 傳送一個 fetch 請求
method: "POST",
// 請求方法為 POST
headers: {
// 設定請求頭
"Content-Type": "application/json",
// 設定授權資訊
Authorization: `Bearer ${apiKey}`,
},
body: JSON.stringify({
// 將請求體轉換為 JSON 字串
model: "gpt-3.5-turbo",
messages: messages,
}),
});
const data = await result.json();
// 等待將響應解析為 JSON 格式
console.log(data);
// 列印響應資料
return data.choices[0].message.content;
// 返回響應資料中 choices 陣列的第一個元素的 message 物件的 content 屬性值
} catch (err) {
// 如果上述操作過程中發生錯誤
throw err;
// 丟擲錯誤
}
};
router.js路由檔案的內容：
import { createRouter, createWebHashHistory } from "vue-router";
// 從 'vue-router' 庫中匯入建立路由和建立雜湊歷史記錄的方法
// 定義路由物件
const router = createRouter({
history: createWebHashHistory(),
// 使用 createWebHashHistory 方法建立雜湊路由的歷史記錄模式
routes: [
// 定義路由配置陣列
{
path: "/",
// 根路徑
name: "home",
// 路由名稱為 'home'
component: () => import("../views/Home.vue"),
// 當訪問根路徑時，透過動態匯入載入 '../views/Home.vue' 元件
},
{
path: "/about",
name: "about",
// 路徑為 '/about'，路由名稱為 'about'
component: () => import("../views/About.vue"),
// 當訪問 '/about' 路徑時，透過動態匯入載入 '../views/About.vue' 元件
},
],
});
export default router;
// 將建立的路由物件匯出，以便在其他模組中使用
APP.vue檔案的內容：
APP.vue是根元件，在此的作用是
路由整合：包含 <router-view> 來展示根據路由匹配動態切換的頁面內容。
<template> <div> <router-view /> </div> </template> <script setup> </script> <style scoped></style>
主角來了：
<template>
<div class="flex flex-col h-screen">
<!-- 頂部導航欄 -->
<div class="flex flex-nowrap fixed w-full items-baseline top-0 px-6 py-4 bg-gray-100">
<div class="text-2xl font-bold">ChatGPT</div>
<div class="ml-4 text-sm text-gray-500">
基於OpenAI的ChatGPT自然語言模型人工智慧對話
</div>
<div class="ml-auto px-3 py-2 text-sm cursor-pointer hover:bg-white rounded-md" @click="clickConfig()">
設定
</div>
</div>
<!-- 訊息顯示區域 -->
<div>
<div class="flex flex-col mt-24 px-6 pb-8">
<div :class="`flex flex-col justify-center ${item.role == 'user'? 'items-end' : 'items-start'
}`" v-for="(item, index) in messageList.slice(2)" :key="index">
<p>{{ item.role }}</p>
<p class="color-gray-500 text-sm">{{ item.content }}</p>
</div>
</div>
</div>
<!-- 輸入區域 -->
<div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100">
<div class="mb-2 text-sm text-gray-500">請輸入API KEY:</div>
<div>
<input v-model="messageContent" class="input flex-1" :type="isConfig? 'password' : 'text'"
:placeholder="isConfig? 'k-xxxxxx' : '給ChatGPT傳送訊息'" @keydown.enter="sendOrSave()" />
<button class="btn ml-4" :disabled="isTalking" @click="sendOrSave()">
儲存
</button>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { chat } from '../libs/gpt.js'
// 定義訊息內容的響應式變數
const messageContent = ref('')
// 定義是否處於配置狀態的響應式變數
const isConfig = ref('')
// 定義是否正在處理中的響應式變數
const isTalking = ref(false)
// 點選設定的處理函式
const clickConfig = () => {
isConfig.value = true;
messageContent.value = getApiKey() || '';
}
// 傳送或儲存的處理函式
const sendOrSave = () => {
if (!messageContent.value.length) return;
if (isConfig.value) {
// 儲存 API 金鑰
if (saveAPIKey(messageContent.value.trim())) {
isConfig.value = false;
}
messageContent.value = '';
} else {
// 傳送訊息
sendMessage()
}
}
// 元件掛載時的處理
onMounted(() => {
if (getApiKey()) {
isConfig.value = false
}
})
// 訊息列表的響應式變數
const messageList = ref([
{
role:'system',
content: '你是 人工智慧客服，請儘可能簡潔地回答問題',
},
{
role: 'assistant',
content: `你好，我是AI語言模型，我可以提供一些常用服務和資訊，例如：
1. 翻譯：我可以把中文翻譯成英文，英文翻譯成中文，還有其他一些語言翻譯，比如法語、日語、西班牙語等。
2. 諮詢服務：如果你有任何問題需要諮詢，例如健康、法律、投資等方面，我可以儘可能為你提供幫助。
3. 閒聊：如果你感到寂寞或無聊，我們可以聊一些有趣的話題，以減輕你的壓力。
請告訴我你需要哪方面的幫助，我會根據你的需求給你提供相應的資訊和建議。`
}
])
// 傳送訊息的非同步函式
const sendMessage = async () => {
const message = messageContent.value.trim();
try {
isTalking.value = true;
messageList.value.push({
role: 'user',
content: message
})
const data = await chat(messageList.value, getApiKey())
messageList.value.push({
role: 'assistant',
content: data
})
messageContent.value = ''
} catch (e) {
} finally {
isTalking.value = false
}
isTalking.value = true;
}
// 儲存 API 金鑰的函式
const saveAPIKey = (apiKey) => {
localStorage.setItem("apiKey", apiKey);
return true;
}
// 獲取 API 金鑰的函式
const getApiKey = () => {
return localStorage.getItem("apiKey");
}
</script>
<style scoped></style>
這段程式碼是一個 Vue 元件的模板和指令碼部分：
模板中包含頂部導航欄、訊息顯示區域和輸入區域。
導航欄顯示應用名稱和描述，並提供了“設定”按鈕。
訊息顯示區域根據訊息的傳送者角色（使用者或助手）進行佈局顯示。
輸入區域用於輸入訊息或 API 金鑰，幷包含儲存或傳送的操作按鈕。
指令碼部分使用
ref定義了一些響應式變數，如messageContent、isConfig、isTalking和messageList。messageContent用於儲存輸入的訊息或 API 金鑰。isConfig表示是否處於配置 API 金鑰的狀態。isTalking表示是否正在處理髮送或接收訊息。messageList儲存了訊息的角色和內容。定義了多個函式來處理不同的操作，如
clickConfig處理設定按鈕的點選，sendOrSave處理髮送或儲存的操作，sendMessage實際傳送訊息並處理響應，saveAPIKey儲存 API 金鑰到本地儲存，getApiKey從本地儲存獲取 API 金鑰。
例如，當用戶點選“設定”按鈕時，isConfig 變為 true，輸入框變為密碼輸入模式，並顯示已儲存的 API 金鑰（如果有）。當用戶輸入訊息並按下回車鍵或點選“儲存”按鈕時，根據 isConfig 的狀態進行儲存 API 金鑰或傳送訊息的操作。在傳送訊息時，會將使用者輸入新增到 messageList 中，等待伺服器響應並將響應內容也新增到 messageList 中。
