最新款electron38+vite7+vue3.5+pinia3桌面客户端聊天程序

2025-09-14 171

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 最新原创electron38+vite7+vue3 setup+pinia3+element-plus电脑端仿微信聊天EXE应用。

2025全新原创自研新作Electron38+Vue3 setup+Pinia3+ElementPlus仿微信电脑端聊天Exe系统。

electron38-vue3-winchat客户端聊天系统封装多窗口管理、自定义拖拽无边框窗口。

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截图20250911235839919.png

项目通用布局

360截图20250911233614102.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>

360截图20250911235310309.png 360截图20250911235637658.png 360截图20250912000735188.png 003360截图20250911222442841.png 008360截图20250911224720315.png

electron38+vue3自定义无边框窗口导航条

b8d120de5aaa892caed299d7768734ba_1289798-20250913080042252-589917298.png

<script setup>
  import { ref } from 'vue'
  import { isTrue } from '@/utils'

  import { winSet } from '@/windows/actions'

  import Winbtns from './btns.vue'

  const props = defineProps({
    // 标题
    title: {type: String, default: ''},
    // 标题颜色
    color: String,
    // 背景色
    background: String,
    // 标题是否居中
    center: {type: [Boolean, String], default: false},
    // 是否固定
    fixed: {type: [Boolean, String], default: false},
    // 背景是否镂空
    transparent: {type: [Boolean, String], default: false},
    // 层级
    zIndex: {type: [Number, String], default: 2024},

    /* 控制Winbtn参数 */
    // 窗口是否可最小化
    minimizable: {type: [Boolean, String], default: true},
    // 窗口是否可最大化
    maximizable: {type: [Boolean, String], default: true},
    // 窗口是否可关闭
    closable: {type: [Boolean, String], default: true},
  })
</script>

<template>
  <div class="ev__winbar" :class="{'fixed': fixed || transparent, 'transparent': transparent}">
    <div class="ev__winbar-wrap flexbox flex-alignc vu__drag">
      <div class="ev__winbar-body flex1 flexbox flex-alignc">
        <!-- 左侧区域 -->
        <div class="ev__winbar-left"><slot name="left" /></div>
        <!-- 标题 -->
        <div class="ev__winbar-title" :class="{'center': center}">
          <slot name="title">{{title}}</slot>
        </div>
        <!-- 右侧附加区域 -->
        <div class="ev__winbar-extra vu__undrag"><slot name="extra" /></div>
      </div>
      <Winbtns :color="color" :minimizable="minimizable" :maximizable="maximizable" :closable="closable" :zIndex="zIndex" />
    </div>
  </div>
</template>

009360截图20250911225000821.png 009360截图20250911225137532.png 009360截图20250911230909907.png 011360截图20250911231535128.png 013360截图20250911231727280.png 018360截图20250911232715404.png 019360截图20250911232843999.png