Vite4-MobileGPT：基于vue3+vant4移动端仿ChatGPT聊天模板

随着最近openAi推出了Iphone版ChatGPT应用APP。标志着chatgpt已经步入了移动领域。

闲暇之余运用vite4.x构建了一个mobile版chatgpt聊天实例。

vue3-mobileGPT 支持白色/暗黑两种主题模式。

技术栈

• 编辑器：Cursor
• 框架技术：vite4+vue3+vue-router+pinia2
• 组件库：Vant^4.3.1 + ve-plus^0.3.2
• 代码格式化：highlight.js^11.7.0
• markdown组件：vue3-markdown-it
• 数据存储：pinia-plugin-persistedstate^3.1.0
• 样式处理：sass^1.62.1

项目结构

基于vite4构建项目，采用vue3 setup编码开发。

vue3组件库

vant 一款轻量级、可定制化的移动端UI组件库。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。vant4支持vue3版本。

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

https://vant-contrib.gitee.io/vant/#/zh-CN/

入口配置main.js

main.js引入总样式、路由/状态管理、公共组件配置。

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

import Router from './router'
import Store from './store'

import Plugins from './plugins'

const app = createApp(App)

app.use(Router)
app.use(Store)
app.use(Plugins)

app.mount('#app')

引入公共插件

新建一个plugins/index.js文件，用来引入一些公共配置文件。

/**
 * 插件配置
 * @author YXY
 */

import '@assets/js/fontSize'

// 引入Vant4.x组件库
import Vant from 'vant'
import 'vant/lib/index.css'

// 引入ve-plus组件库
import VEPlus from 've-plus'
import 've-plus/dist/ve-plus.css'

// 引入vue3弹框组件
import V3Popup from '@/components/v3popup'

import Navbar from '@/components/Navbar.vue'

const Plugins = (app) => {
    app.use(Vant)
    app.use(VEPlus)
    app.use(V3Popup)

    // 注册导航栏组件
    app.component('Navbar', Navbar)
}

export default Plugins

vue3-mobilegpt聊天框

项目中聊天框使用了ve-plus组件库中的Input组件，支持type=textarea多行文本。可自定义后缀插槽模板。

store/chat.js进行聊天状态本地存储管理。

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

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

export const chatStore = defineStore('chat', {
    state: () => ({
        sessionId: '',
        session: []
    }),
    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) {
            this.session.map(item => {
                if(item.sessionId == this.sessionId) {
                    if(item.data && !isEmpty(item.data)) {
                        item.data.map((it, key) => {
                            if(it.key == ssid) {
                                item.data.splice(key, 1)
                            }
                        })
                    }
                }
            })
        },

        // 清空会话
        clearSession() {
            this.session = []
            this.sessionId = ''
        }
    },
    // 本地持久化存储(默认存储localStorage)
    persist: true
})

Oker，以上就是vue3模仿chatgpt移动端的一些简单分享，希望对大家有所帮助。

https://segmentfault.com/a/1190000040711708
https://segmentfault.com/a/1190000043667464