Electron31-vite5-chat：原创vue3+electron31+pinia2客户端聊天exe应用

vite5-electronChat：首创electron31.x+vite5+vue3 setup+pinia2搭建桌面端聊天系统实例。

框架与工具

• Vue 3: 利用Vue 3的Composition API来编写更可维护的代码，通过setup脚本简化组件逻辑。
• Electron 31: 提供跨平台的能力，使应用能在Windows、macOS和Linux上运行。
• Vite 5: 作为构建工具，加速开发时的热更新，提高开发效率。
• Element Plus: 作为UI组件库，提供丰富的桌面端界面元素，快速搭建界面。
• Pinia: 状态管理库，用于管理应用状态，pinia-plugin-persistedstate用于持久化存储状态。
• vue-router 4: 路由管理，支持桌面端的页面导航。
• electron-builder: 用于打包应用，生成可执行文件。
• vite-plugin-electron^0.28.7：electron整合vite插件

项目目录结构

electron-vitechat采用vite5.x构建工具搭建项目模板，整合最新跨平台技术electron31框架。

实现功能

• 聊天功能: 实现即时消息发送，支持文本、图片、视频、语音、红包等。
• 多窗口管理: 支持多开窗口，模拟真实聊天应用体验。
• 动态换肤: 提供用户界面换肤功能，增加用户个性化体验。
• 通讯录与朋友圈: 类似微信的联系人管理与社交分享功能。
• 自定义导航条: 为应用定制导航，提升用户体验。

vite整合electron搭建跨端项目

通过vite.js构建工具搭建vue3项目模板。

yarn create vite electron-vitechat cd electron-vitechat yarn install yarn dev

安装electron依赖包插件。

// 安装electron yarn add -D electron // 安装electron-builder 用于打包可安装exe程序和绿色版免安装exe程序 yarn add -D electron-builder // 安装vite-plugin-electron 用于将vite与electron无缝结合 yarn add -D vite-plugin-electron

electron主进程设置

/** * electron主进程入口配置 * @author andy */ import { app, BrowserWindow } from 'electron' import { WindowManager } from '../src/windows/index.js' // 忽略安全警告提示 Electron Security Warning (Insecure Content-Security-Policy) process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true const createWindow = () => { let win = new WindowManager() win.create({isMajor: true}) // 系统托盘管理 win.trayManager() // 监听ipcMain事件 win.ipcManager() } app.whenReady().then(() => { createWindow() app.on('activate', () => { if(BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if(process.platform !== 'darwin') app.quit() })

公共布局模板

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

vue3+electron31自定义系统导航条

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

electron31多窗口管理

/** * 创建新窗口 * @param {object} args 窗口配置参数 {url: '/chat', width: 850, height: 600, ...} */ export function winCreate(args) { window.electron.send('win-create', args) }

通过如下方式快速创建一个新窗口。

// 登录窗口 export function loginWindow() { winCreate({ url: '/login', title: '登录', width: 320, height: 380, isMajor: true, resizable: false, maximizable: false, alwaysOnTop: true }) } // 关于窗口 export function aboutWindow() { winCreate({ url: '/win/about', title: '关于', width: 375, height: 300, minWidth: 375, minHeight: 300, maximizable: false, alwaysOnTop: true, }) } // 设置窗口 export function settingWindow() { winCreate({ url: '/win/setting', title: '设置', width: 550, height: 470, resizable: false, maximizable: false, }) }

electron-builder打包配置

在项目根目录新建一个electron-builder.json打包配置文件。

{ "productName": "Electron-ViteChat", "appId": "com.andy.electron-vite-wechat", "copyright": "Copyright © 2024-present Andy Q:282310962", "compression": "maximum", "asar": true, "directories": { "output": "release/${version}" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true, "perMachine": true, "deleteAppDataOnUninstall": true, "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "ElectronViteChat" }, "win": { "icon": "./resources/shortcut.ico", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}", "target": [ { "target": "nsis", "arch": ["ia32"] } ] }, "mac": { "icon": "./resources/shortcut.icns", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}" }, "linux": { "icon": "./resources", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}" } }

博客：基于flutter3+getx+bitsdojo_window仿微信客户端|flutter聊天EXE
博客：uniapp-weos：原创uniapp+vue3手机版后台OA管理系统(h5+小程序+App端...
博客：uniapp-wechat：基于uni-app+vue3跨端仿微信App实例(h5+小程序+APP端...
博客：flutter-dylive：基于flutter3.x+getx短视频直播|Flutter3仿抖音app

本作品采用《CC 协议》，转载必须注明作者和本文链接