vue3+electron31+vite5客户端聊天应用

基于最新跨平台技术原创研发vue3+electron31.x+vite5+pinia2+element-plus仿微信电脑版聊天室Exe程序。整个聊天程序界面清爽简约，支持展示/收缩侧边栏、electron新开多窗口、换肤等功能。

electron31+vite5+vue3+elementPlus仿微信客户端聊天exe程序ElectronViteChat

vue3-electron-wechat使用vite5.x构建工具搭建项目模板，采用vue3 setup语法开发，融合electron跨平台技术。

实现技术

• 编码工具：Vscode
• 技术框架：electron31+vite5+vue3.4.29+vue-router4.4.0
• 跨端框架：electron^31.1.0
• 组件库：element-plus^2.7.6 (饿了么vue3组件库)
• 状态管理：pinia^2.1.7
• 存储服务：pinia-plugin-persistedstate^3.2.1
• electron打包工具：electron-builder^24.13.3
• electron整合vite插件：vite-plugin-electron^0.28.7

前段时间有分享一篇vue3+vite5网页版聊天室，感兴趣的可以去看看。
https://ask.dcloud.net.cn/article/41153

项目结构

vite-electronChat聊天已经同步到我的最新原创作品集，有需要的可以去看看。
https://gf.bilibili.com/item/detail/1106312011

入口配置main.js

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

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

// 引入路由/状态管理  
import Router from './router'  
import Pinia from './pinia'  

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

launchApp().then(config => {  
  if(config) {  
    console.log('窗口参数:', config)  
    console.log('窗口id:', config?.id)  

    // 全局存储窗口配置  
    window.config = config  
  }  

  // 创建app应用实例  
  createApp(App)  
  .use(ElementPlus)  
  .use(Router)  
  .use(Pinia)  
  .mount('#app')  
})

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>

electron多窗口|新开窗口

/**  
 * 创建新窗口  
 * @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,  
  })  
}

新建窗口支持如下参数配置：

// 自定义窗口参数  
const windowOptions = {  
  // 窗口唯一标识id  
  id: null,  
  // 窗口标题  
  title: 'Electron-ViteChat',  
  // 窗口路由地址  
  url: '',  
  // 窗口数据传参  
  data: null,  
  // 是否是主窗口(为true则会关闭所有窗口并创建一个新窗口)  
  isMajor: false,  
  // 是否支持多开窗口(为true则支持创建多个窗口)  
  isMultiple: false,  
  // 窗口是否最大化  
  maximize: false,  
}  

// 系统窗口参数(与electron的new BrowserWindow()参数一致)  
const windowBaseOptions = {  
  // 窗口图标  
  icon: join(__root, 'resources/shortcut.ico'),  
  // 是否自动隐藏菜单栏(按下Alt键显示)  
  autoHideMenuBar: true,  
  // 窗口标题栏样式  
  titleBarStyle: 'hidden',  
  // 窗口背景色  
  backgroundColor: '#fff',  
  // 宽度  
  width: 840,  
  // 高度  
  height: 610,  
  // 最小宽度  
  minWidth: '',  
  // 最小高度  
  minHeight: '',  
  // 窗口x坐标  
  x: '',  
  // 窗口y坐标  
  y: '',  
  // 是否可缩放  
  resizable: true,  
  // 是否可最小化  
  minimizable: true,  
  // 是否可最大化  
  maximizable: true,  
  // 是否可关闭  
  closable: true,  
  // 父窗口  
  parent: null,  
  // 是否模态窗口  
  modal: false,  
  // 窗口是否置顶  
  alwaysOnTop: false,  
  // 是否显示窗口边框(要创建无边框窗口，将frame参数设置为false)  
  frame: false,  
  // 是否透明窗口(仅frame: false有效)  
  transparent: false,  
  // 创建时是否显示窗口  
  show: false,  
}

electron-builder打包配置

{  
  "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}"  
  }  
}

综上就是vue3+vite5+electron31实战开发仿微信客户端聊天的一些知识分享，希望对大家有些帮助~

作者：xiaoyan2017
链接： https://segmentfault.com/a/1190000045042968
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。