之前有给大家分享一个electron桌面端GPT实例，今天分享的是全端uniapp-chatgpt会话实例项目。
uniChatGPT 一款基于uni-app+vite4+vue3+pinia+uview-plus等技术构建多端仿制ChatGPT应用实例模板项目。支持编译到h5+小程序+APP端，支持渲染markdown语法及代码高亮、解决软键盘撑起布局痛点等问题。
electron25+vue3客户端仿制chatGPT应用程序EXE
技术栈
- 编码工具：HbuilderX 3.8.4
- 框架技术：Uniapp+Vite4+Vue3+Pinia
- UI组件库：uView-plus^3.1.31
- markdown渲染：markdown-it
- 代码高亮：highlight.js
- 本地缓存：pinia-plugin-unistorage
- 支持编译：小程序+H5+APP端
uni-chatgpt 支持三端渲染markdown语法/代码高亮，解决了小程序/App端键盘撑跑布局痛点。
项目层结构
采用标准的HBuilderX编辑器创建项目，采用vue3 setup语法编码开发。
main.js配置
使用vue3语法，引入组件库、pinia状态管理。
复制代码/**
* 主入口配置
*/
import App from './App'
import { createSSRApp } from 'vue'
// 引入pinia状态管理
import pinia from '@/store'
// 引入uview-plus组件库
import uviewplus from '@/uview-plus'
export function createApp() {
const app = createSSRApp(App)
app.use(pinia)
app.use(uviewplus)
return {
app,
pinia
}
}App.vue模板
同样采用vue3 setup语法编码。
复制代码uniapp vue3自定义导航条/底部菜单栏
如下图：项目中采用沉浸式导航栏+底部Tabbar组件。
组件采用easycom组件结构，直接使用即可。
复制代码
目前这两个组件已经发布到插件市场，大家免费下载使用。
https://ext.dcloud.net.cn/plugin?id=5592
https://ext.dcloud.net.cn/plugin?id=5593
uni-app vue3自定义增强版Input输入框
如下图：项目中input输入框支持多行文本、自定义前缀/后缀插槽等功能。
ua-input增强版输入框已经发布插件市场，免费下载使用。
https://ext.dcloud.net.cn/plugin?id=13275
调用非常简单，支持多种方式自定义组件。
- 基础用法
复制代码- 密码框/自动获取焦点
复制代码- 多行输入/自适应高度/清除功能
复制代码- 自定义自适应最大高度、清除事件、前置/后置插槽
复制代码OK，基于uni-app+vue3开发跨端gpt项目就先分享到这里了。
链接：https://juejin.cn/post/7249347651787243581
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
