最近觉得自己对vue愈加熟练，就决定利用tailwindcss手搓一个智能聊天机器人，用了不到一个下午就完成了，不用自己写样式确实爽（虽然这次也没用到什么样式），下图为实现效果：
tailwindcss
有些小伙伴可能不知道tailwindcss是什么，它其实就是一个CSS框架，让我们可以不用自己辛辛苦苦写样式了，各种各样的样式，只有你想不到的，没有它做不到。我们只需要给上正确的类名，样式就生效了。
如何在vue项目中引入
1. 安装依赖
在集成终端中打开对应项目并输入指令：
npm install -D tailwindcss postcss autoprefixer
2. 初始化配置
继续输入指令：
npx tailwindcss init
3. 引入样式
在全局样式文件中引入Tailwind CSS：
/* ./src/main.css */ @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';
然后我们就可以在我们的项目中使用Tailwind CSS了，我这一整个聊天机器人的元素样式都是通过它来实现的。
实现过程
文件整体结构
各文件功能介绍及源码
src\libs\gpt.js（向chat发送请求，拿取数据）
export const chat = async (messages,apiKey) => {
try{
const result = await fetch("https://api.302.ai/v1/chat/completions",{
method:"POST",
headers:{
"Content-Type":"application/json",
// 授权信息
"Authorization":`Bearer ${apiKey}`
},
body:JSON.stringify({
model:"gpt-3.5-turbo",
messages:messages
})
})
const data = await result.json()
console.log(data);
return data.choices[0].message.content
}catch(err){
throw(err)
}
}
src\router\index.js （配置路由）
import { createRouter,createWebHashHistory } from 'vue-router'
const router = createRouter({
history:createWebHashHistory(),
routes:[
{
path:'/',
name:'home',
// 页面级别组件 views
component:() => import('../views/home.vue')
}
]
})
export default router
src\App.vue （引入路由页面）
<template> <div> <router-view /> </div> </template> <script setup> </script> <style scoped> </style>
src\main.js （引入tailwindcss并使用路由）
import { createApp } from 'vue'
import './assets/tailwind.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app
.use(router)
.mount('#app')
src\views\home.vue （主体部分）
<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 class="flex-1 mx-2 mt-20 mb-2">
<div class="group flex flex-col px-4 py-3 rounded-lg"
v-for="item of messageList.filter((v) => v.role != 'system')">
<div class="flex justify-between item-center mb-2">
{{ item.role }}:
<div>
{{ item.content }}
</div>
</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" v-if="isConfig">
请输入API KEY:
</div>
<div class="flex">
<input class="input flex-1" :type="isConfig ? 'password' : 'text'"
:placeholder="isConfig ? 'sk-xxxxxx' : '请输入你的问题'" v-model="messageContent"
@keydown.enter="SendOrSave()" />
<button class="btn ml-4" :disabled="isTalking" @click="SendOrSave()">保存</button>
</div>
</div>
</div>
</template>
<script setup>
import { chat } from '../libs/gpt'
import { ref, onMounted } from 'vue'
const messageContent = ref('')
const isConfig = ref(true)
const isTalking = ref(false)
const messageList = ref([
{
role: 'system',
content: "你是人工智能客服，请尽可能简洁回答问题"
},
{
role: 'assistant',
content: `
你好，我是AI语言模型，我可以提供一些常用服务和信息，例如：
1. 翻译：我可以把中文翻译成英文，英文翻译成中文，还有其他一些语言翻译，比如法语、日语、西班牙语等。
2. 咨询服务：如果你有任何问题需要咨询，例如健康、法律、投资等方面，我可以尽可能为你提供帮助。
3. 闲聊：如果你感到寂寞或无聊，我们可以聊一些有趣的话题，以减轻你的压力。
请告诉我你需要哪方面的帮助，我会根据你的需求给你提供相应的信息和建议。
`
}
])
const clickConfig = () => {
isConfig.value = true
}
onMounted(() => {
if (getApiKey()) {
isConfig.value = false
}
})
const SendOrSave = () => {
if (!messageContent.value.length) return;
if (isConfig.value) {
// save api-key
if (saveAPIKey(messageContent.value.trim())) {
isConfig.value = false
}
messageContent.value = ''
} else {
// send message
sendMessage()
}
}
const saveAPIKey = (apiKey) => {
localStorage.setItem('apiKey', apiKey);
return true
}
const getApiKey = () => {
return localStorage.getItem('apiKey')
}
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
})
} catch (err) {
console.log('失败');
} finally {
isTalking.value = false
}
}
</script>
<style></style>
包含页面主题内容，提示词以及apikey的存储。这里要注意的是输入apikey与输入问题用的是同一个input。
