插头 东莞网站建设,宁波网站推广代运营,建设档案员证书查询网站,卖鞋做哪个网站好使用vue3pinia2开发仿制chatgpt界面聊天实例Vue3-Chatgpt 基于Vue3.xPinia2VueRouterVue3-Markdown等技术构建仿ChatGPT网页端聊天程序。支持经典分栏界面布局、light/dark模式、全屏半屏显示、Markdown语法解析、侧边栏隐藏等功能。 技术框架
编辑工具#xff1a;Cursor框架…使用vue3pinia2开发仿制chatgpt界面聊天实例Vue3-Chatgpt 基于Vue3.xPinia2VueRouterVue3-Markdown等技术构建仿ChatGPT网页端聊天程序。支持经典分栏界面布局、light/dark模式、全屏半屏显示、Markdown语法解析、侧边栏隐藏等功能。 技术框架
编辑工具Cursor框架技术Vue3Vite4.xPinia2组件库VEPlus (基于vue3桌面端组件库)国际化多语言vue-i18n^9.2.2代码高亮highlight.js^11.7.0本地存储pinia-plugin-persistedstate^3.1.0markdown解析vue3-markdown-it 项目目录结构 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 和 debuggerdrop: env.VITE_DROP_CONSOLE ? [console, debugger] : []},/*开发服务器选项*/server: {// 端口port: env.VITE_PORT,// 是否浏览器自动打开open: env.VITE_OPEN,// 开启httpshttps: 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}}}
})main.js主入口
import { createApp } from vue
import App from ./App.vue// 引入Router和Store
import Router from ./router
import Store from ./store// 引入插件配置
import Plugins from ./pluginsconst app createApp(App)app
.use(Router)
.use(Store)
.use(Plugins)
.mount(#app)vue3.x组件库
项目中使用的组件库是基于vue3自定义UI组件库Ve-plus。一个支持40组件的轻量级组件库。 安装组件
yarn add ve-plus
npm i ve-plus --savehttps://blog.csdn.net/yanxinyun1990/article/details/129312570
整体布局
项目支持2种布局模式整体分为顶栏侧边栏主体内容三大模块构成。 div classve__layout-body flex1 flexbox!-- //中间栏 --div classve__layout-menus flexbox :class{hidden: store.config.collapse}aside classve__layout-aside flexbox flex-colChatNew /Scrollbar classflex1 autohide size4 gap1ChatList //ScrollbarExtraLink /Collapse //aside/div!-- //右边栏 --div classve__layout-main flex1 flexbox flex-col!-- 主内容区 --Main //div
/divtemplatediv classvegpt__editordiv classvegpt__editor-innerFlex :gap0Popover placementtop triggerclick width150Button classbtn typelink iconve-icon-yuyin1 v-tooltip{content: 发送语音, theme: light, arrow: false}/Buttontemplate #contentdiv classflexbox flex-alignc flex-col stylepadding: 15px 0;Icon nameve-icon-yuyin size40 color#0fa27e /p classfs-12 mb-15 c-999网络不给力/pButton sizesmalli stylebackground:#f00;border-radius:50%;box-shadow:0 1px 2px #999;margin-right:5px;height:8px;width:8px;/i开始讲话/Button/div/template/PopoverButton classbtn typelink v-tooltip{content: 发送图片, theme: light, arrow: false}Icon nameve-icon-photo size16 cursor /input refuploadImgRef typefile title acceptimage/* changehandleUploadImage //ButtonInputclassflex1refeditorRefv-modeleditorTexttypetextarea:autosize{maxRows: 4}clearableplaceholderPrompt...keydownhandleKeydownclearhandleClearstylemargin: 0 5px;/Button classbtn typelink iconve-icon-submit clickhandleSubmit/Button/Flex/div/div
/templateimport { ref, watch } from vue
import { guid } from /utils
import { chatStore } from /store/modules/chatconst props defineProps({value: { type: [String, Number] }
})
const emit defineEmits([clear])const chatState chatStore()const uploadImgRef ref()
const editorRef ref()
const editorText ref(props.value)// ...// 发送会话
const handleSubmit () {editorRef.value.focus()if(!editorText.value) returnlet data {type: text,role: User,key: guid(),content: editorText.value}chatState.addSession(data)// 清空editorText.value
}
const handleKeydown (e) {// ctrlenterif(e.ctrlKey e.keyCode 13) {handleSubmit()}
}
const handleClear () {emit(clear)
}
// 选择图片
const handleUploadImage () {let file uploadImgRef.value.files[0]if(!file) returnlet size Math.floor(file.size / 1024)console.log(size)if(size 2*1024) {Message.danger(图片大小不能超过2M)uploadImgRef.value.value return false}let reader new FileReader()reader.readAsDataURL(file)reader.onload function() {let img this.resultlet data {type: image,role: User,key: guid(),content: img}chatState.addSession(data)}
}/*** 聊天状态管理* author YXY Q282310962*/import { defineStore } from pinia
import { guid, isEmpty } from /utilsexport const chatStore defineStore(chat, {state: () ({// 聊天会话记录sessionId: ,session: []}),getters: {},actions: {// 创建新会话createSession(ssid) {this.sessionId ssidthis.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, // 不设置则是默认appstorage: localStorage,paths: [aa, bb] // 设置缓存键} */
})好了基于vue3vite4pinia2开发模仿chatgpt聊天就分享到这里。
Tauri-Vue3聊天实例|Tauri跨端聊天 uniapp-ttlive短视频聊天|uniappuview仿抖音实例
