Tauri2-WeChat聊天程序|vite7+tauri2+vue3+pinia3客户端聊天Exe最新版tauri2.

2025最新版爆肝新作tauri2.8+vite7+vue3 setup+pinia3仿微信电脑端聊天系统。

013360截图20251022074406464.png

360截图20251021225051896.png

项目知识点

跨平台框架：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
组件库：element-plus^2.11.5
富文本编辑器：@vueup/vue-quill^1.2.0
样式预处理：sass^1.93.2
短视频滑动插件：swiper^12.0.2

360截图20251021223945835.png

基于最新版跨平台技术tauri2.8+vite7.1初始项目模板，使用vue3 setup语法糖编码开发。

360截图20251021221317391.png

001360截图20251021234042701.png

360截图20251021222258498.png

360截图20251021222634106.png

360截图20251021223625471.png

360截图20251021224712920.png

360截图20251021230007463.png

项目通用结构

1e1c17c26b800e9c431aa91f636b599b_1289798-20251022100450393-1367708418.png

项目整体结构如上图所示。

ffda48ad34b665a9df18e0a15911beac_1289798-20251022100625641-451414564.png

<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>