mobileGPT-vue3 一款基于vite4.x+vue3+pinia2+vantUI+vue-router等技术搭建的手机端聊天AI模板。

null

使用技术

  • 开发工具：Vscode
  • 框架技术：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

null

null

整个项目基于vite4.x构建，采用vue3 setup最新语法糖编码开发。

null

null

界面简洁一致，支持light/dark模式，支持多种markdown语法。

null

app.vue模板

<script setup>  
  import { Loaded } from '@/plugins/loaded'  
  // 初始化  
  Loaded()  
</script>  

<template>  
  <div class="vgpt__container flexbox flex-col">  
    <router-view />  
  </div>  
</template>  

<style scoped></style>

主入口页面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')

vue3状态管理

vue3官方推荐使用pinia进行状态管理。使用语法和vuex类似。

/**  
 * pinia状态管理  
 * @author YXY  
 */  

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

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

export default pinia

mobileGPT聊天会话框

null
如上图：聊天会话框采用Input组件，支持多行文本输入，可自定义后缀插槽。

<template>  
    <div class="vgpt__editor">  
        <div class="vgpt__editor-inner flexbox">  
            <Input  
                class="flex1"  
                ref="editorRef"  
                v-model="editorText"  
                type="textarea"  
                :autosize="{maxRows: 6}"  
                clearable  
                placeholder="Prompt..."  
                @keydown="handleKeydown"  
                @clear="handleClear"  
                style="margin: 0 5px;"  
            >  
                <template #suffix>  
                    <Button class="btn" type="link" @click.stop>  
                        <Icon name="ve-icon-image" size="16" cursor />  
                        <input ref="uploadImgRef" type="file" title="" accept="image/*" @change="handleUploadImage" />  
                    </Button>  
                    <van-popover v-model:show="showPopover" placement="top">  
                        <template #reference>  
                            <Button class="btn" type="link" icon="ve-icon-audio"></Button>  
                        </template>  
                        <div class="flexbox flex-alignc flex-col" style="padding: 15px 0; min-width: 120px;">  
                            <Icon name="ve-icon-yuyin" size="40" color="#0fa27e" />  
                            <p class="fs-12 mb-15 c-999">网络不给力</p>  
                            <van-button size="mini"><i></i>开始讲话</van-button>  
                        </div>  
                    </van-popover>  
                </template>  
            </Input>  
            <Button type="primary" icon="ve-icon-arrowup" circle :disabled="!editorText" @click="handleSubmit"></Button>  
        </div>  
    </div>  
</template>

OKa，以上就是vue3+pinia开发移动端chatgpt的一些简单分享，后续还会分享一些项目实例。