通过vue利用tailwindcss写一个ChatGPT聊天机器人

最近觉得自己对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 lang="css" 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。

结语

样式都由tailwindcss实现，通过准确的类名，如果大家对代码哪里有疑问的话，欢迎提问。