基于vue3.x+vite4+pinia2仿chatgpt聊天模拟实例Vue3-WeGPT。

基于Vite4.x+Vue3+Pinia2+VEPlus+Vue3-Markdown等技术实现仿ChatGPT聊天AI界面实例。整体界面简洁清新、支持2种界面布局、暗黑+亮色模式、全屏+半屏展示、Markdown语法解析、侧边栏收缩等功能。

使用技术

• 编辑器：cursor
• 框架技术：vue3+vite4.x+pinia2
• 组件库：veplus (基于vue3桌面端组件库)
• 国际化方案：vue-i18n^9.2.2
• 代码高亮：highlight.js^11.7.0
• 本地存储：pinia-plugin-persistedstate^3.1.0
• markdown解析：vue3-markdown-it
• 样式处理：sass^1.62.0

特征

• 最新前端技术栈 vite4、vue3、pinia2、vue-router、vue-i18n
• 支持中文/英文/繁体多语言
• 支持dark/light两种模式
• 提供2种模板布局
• 支持半屏/全屏展示
• 支持更换背景皮肤
• 搭配轻量级vue3组件库ve-plus

项目结构

整个项目采用vite4.x搭建项目，vue3 setup语法编码，运行编译速度极快。

Vue3组件库

项目依然采用自己开发的vue3自定义UI组件库VE-Plus。提供40+常用组件，运行轻巧、风格清新。

安装使用

yarn add ve-plus
npm install ve-plus -S
cnpm install ve-plus -S

https://www.cnblogs.com/xiaoyan2017/p/17170454.html

布局模板

提供了经典+分栏两种布局展示模板。

vite.config.js配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { parseEnv } from './src/utils/env'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const viteEnv = loadEnv(mode, process.cwd())
const env = parseEnv(viteEnv)

return {  
    plugins: \[vue()\],

    // base: '/',  
    // mode: 'development', // development|production

    /\*构建选项\*/  
    build: {  
        // minify: 'esbuild', // 打包方式 esbuild(打包快)|terser  
        // chunkSizeWarningLimit: 2000, // 打包大小警告  
        // rollupOptions: {  
        //     output: {  
        //         chunkFileNames: 'assets/js/\[name\]-\[hash\].js',  
        //         entryFileNames: 'assets/js/\[name\]-\[hash\].js',  
        //         assetFileNames: 'assets/\[ext\]/\[name\]-\[hash\].\[ext\]',  
        //     }  
        // }  
    },  
    esbuild: {  
        // 打包去除 console.log 和 debugger  
        drop: env.VITE\_DROP\_CONSOLE ? \['console', 'debugger'\] : \[\]  
    },

    /\*开发服务器选项\*/  
    server: {  
        // 端口  
        port: env.VITE\_PORT,  
        // 是否浏览器自动打开  
        open: env.VITE\_OPEN,  
        // 开启https  
        https: env.VITE\_HTTPS,  
        // 代理配置  
        proxy: {  
            // ...  
        }  
    },

    resolve: {  
        // 设置别名  
        alias: {  
            '@': resolve(\_\_dirname, 'src'),  
            '@assets': resolve(\_\_dirname, 'src/assets'),  
            '@components': resolve(\_\_dirname, 'src/components'),  
            '@views': resolve(\_\_dirname, 'src/views'),  
            // 解决vue-i18n警告提示：You are running the esm-bundler build of vue-i18n.  
            'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'  
        }  
    }  
}  

})

Vue3主入口文件

在main.js引入路由、Pinia状态管理及注册一些公共组件。

import { createApp } from 'vue'
import App from './App.vue'

// 引入Router和Store
import Router from './router'
import Store from './store'

// 引入插件配置
import Plugins from './plugins'

const app = createApp(App)
app
.use(Router)
.use(Store)
.use(Plugins)
.mount('#app')

chatgpt聊天框

聊天框使用Input组件实现，设置type=textarea，支持多行自适应高度。

vue3项目现在比较推荐pinia替代vuex进行状态管理。使用 pinia 和 pinia-plugin-persistedstate 看看本地存储。

import { createPinia } from 'pinia'
// 引入pinia本地持久化存储
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

/**
* 聊天状态管理
* @author YXY Q：282310962
*/

import { defineStore } from 'pinia'
import { guid, isEmpty } from '@/utils'

export const chatStore = defineStore('chat', {
state: () => ({
// 聊天会话记录
sessionId: '',
session: []
}),
getters: {},
actions: {
// 创建新会话
createSession(ssid) {
this.sessionId = ssid
this.session.push({
sessionId: ssid,
title: '',
data: []
})
},

    // 新增会话  
    addSession(message) {  
        // 判断当前会话uuid是否存在，不存在创建新会话  
        if(!this.sessionId) {  
            const ssid = guid()  
            this.createSession(ssid)  
        }  
        this.session.map(item => {  
            if(item.sessionId == this.sessionId) {  
                if(!item.title) {  
                    item.title = message.content  
                }  
                item.data.push(message)  
            }  
        })  
        // ...  
    },

    // 获取会话  
    getSession() {  
        return this.session.find(item => item.sessionId == this.sessionId)  
    },

    // 移除会话  
    removeSession(ssid) {  
        const index = this.session.findIndex(item => item?.sessionId === ssid)  
        if(index > -1) {  
            this.session.splice(index, 1)  
        }  
        this.sessionId = ''  
    },  
    // 删除某一条会话  
    deleteSession(ssid) {  
        // ...  
    },

    // 清空会话  
    clearSession() {  
        this.session = \[\]  
        this.sessionId = ''  
    }  
},  
// 本地持久化存储(默认存储localStorage)  
persist: true  
/\* persist: {  
    // key: 'chatStore', // 不设置则是默认app  
    storage: localStorage,  
    paths: \['aa', 'bb'\] // 设置缓存键  
} \*/  

})

OK，以上就是vue3.x开发仿制ChatGPT聊天功能的介绍，希望大家喜欢~~

最后附上一个Vite+Electron桌面MacUI实例

https://www.cnblogs.com/xiaoyan2017/p/14926338.html