Tauri2.8+Vite7聊天室|tauri2+vue3+pinia3仿微信/QQ客户端聊天应用-极光社区

2025最新版实战新作tauri2.8+vue3+vite7+pinia3桌面版聊天exe系统tauri2-vue3-wechat。

null

技术点

跨平台框架：tauri2.8
前端技术框架：vite^7.1.10+vue^3.5.22+vue-router^4.6.3
状态管理：pinia^3.0.3
本地存储：pinia-plugin-persistedstate^4.5.0
UI组件库：element-plus^2.11.5
富文本编辑器：@vueup/vue-quill^1.2.0
样式预处理：sass^1.93.2
短视频滑动插件：swiper^12.0.2

null

项目结构框架

使用最新版跨平台框架Tauri2.8+Vite7.1搭建项目模板，vue3 setup语法糖编码开发。

null

tauri2-vite7-winchat聊天室项目已经更新到我的原创作品小铺。
Tauri2.0+Vite7+ElementPlus桌面聊天Exe程序

null

项目入口main.js

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

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

// 引入路由/状态配置
import Router from './router'
import Pinia from './pinia'

createApp(App)
.use(VEPlus)
.use(ElementPlus)
.use(Router)
.use(Pinia)
.mount('#app')

项目布局结构

null

项目布局分为左侧菜单栏+侧边栏+内容区等板块。

null

<template>
  <div class="vu__chatbox">
    <template v-if="!route?.meta?.isNewWin">
      <div
        class="vu__container flexbox flex-alignc flex-justifyc"
        :style="{'--themeSkin': appstate.config.skin}"
      >
        <div class="vu__layout flexbox flex-col">
          <div class="vu__layout-body flex1 flexbox" @contextmenu.prevent>
            <!-- 菜单栏 -->
            <slot v-if="!route?.meta?.hideMenuBar" name="menubar">
              <MenuBar />
            </slot>

            <!-- 侧边栏 -->
            <div v-if="route?.meta?.showSideBar" class="vu__layout-sidebar flexbox">
              <aside class="vu__layout-sidebar__body flexbox flex-col">
                <slot name="sidebar">
                  <SideBar />
                </slot>
              </aside>
            </div>

            <!-- 主内容区 -->
            <div class="vu__layout-main flex1 flexbox flex-col">
              <ToolBar v-if="!route?.meta?.hideToolBar" />
              <router-view v-slot="{ Component, route }">
                <keep-alive>
                  <component :is="Component" :key="route.path" />
                </keep-alive>
              </router-view>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <WinLayout />
    </template>
  </div>
</template>