Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe

掘金前端

xiaoyan2015

2025年9月14日 10:35

2025最新款原创新作electron38+vite7+vue3 setup+pinia3仿微信客户端聊天程序。

未标题-3.png

009360截图20250911225743164.png

技术知识点

跨平台框架：electron38.0.0
前端框架：vite7.1.2+vue3.5.18+vue-router4.5.1
组件库：element-plus^2.11.2
状态插件：pinia^3.0.3
存储插件：pinia-plugin-persistedstate^4.5.0
打包构建：electron-builder^24.13.3
electron结合vite插件：vite-plugin-electron^0.29.0

基于最新版跨平台技术electron38+vite7搭建项目模板，整个项目使用vue3 setup语法糖编码开发。

360截图20250911234347782.png

001360截图20250911221236448.png

360截图20250911235310309.png

360截图20250911235524326.png

360截图20250911235637658.png

360截图20250911235730072.png

360截图20250911235839919.png

项目通用模板

86044af8129cbb94dab7410db3416ed3_1289798-20250913073744421-1992270846.png

7a38d1a01768cfa947aa85f425926a64_1289798-20250913073839199-108741287.png

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