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

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

安装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主进程设置

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

/**
 * 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多窗口管理

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

/**
 * 创建新窗口
 * @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 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 2

牛啊

5天前 评论
xiaoyan2015 (楼主) 5天前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
52
粉丝
47
喜欢
101
收藏
56
排名:366
访问:2.6 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
2
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
2
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1
uniapp后台
1
uni-app+uview后台系统
1
svelte.js实战开发
1
svelte3仿微信
1
svelte+svelteKit聊天室
1
svelte聊天实例
2
svelte朋友圈
1
svelte.js仿微信
1
svelte.js网页聊天
1
svelte-ui-admin
1
svelte-admin后台管理
1
svelte管理系统
1
tauri桌面应用
1
tauri+vue3
1
vite3+tauri
1
tauri聊天程序
1
tauri仿微信
1
vue3后台管理
1
vite.js管理系统
1
vue3+vite4
1
vite4+pinia
1
vue3+pinia2
1
vue3-chatgpt
2
vite-chatgpt
1
chatgpt-mobile
1
electron-chatgpt
1
electron+vite4+vue3
1
electron25-vue3
1
chatgpt-vite
1
uni-chatgpt
1
uniapp+vue3+pinia
3
vite+uniapp
1
chatgpt-uniapp
1
tauri-admin
1
tauri+rust+vue3
1
tauri后台管理
1
tauri-vite
1
tauri+vue3桌面端后台
1
react18 hooks
2
react18+arco
2
react18+zustand
1
react18-webchat
1
react18-admin
1
react-arco-admin
1
react-vite-admin
1
react18后台管理
1
electron-mateos
1
electron27+react18
1
electron-react-macos
1
electron桌面os
1
react-macos
1
uniapp+vue3直播
1
flutter3-chat
2
flutter3仿微信
2
flutter3聊天
2
flutter3+dart3
1
flutter3桌面端开发
1
flutter3-douyin
1
flutter3仿抖音
1
flutter3短视频
1
flutter3直播
1
flutter3-macos
1
flutter3-osx
2
flutter3桌面os
2
flutter3仿macOS
1
uniapp+vue3聊天
1
uniapp+vue3仿微信
1
uniapp+vue3聊天app
1
uniapp-vue3-wchat
1
uni-vue3-os
1
uniapp+vue3手机后台
1
uniapp-admin
1
uniapp+vue3仿ios桌面
1
uniapp+vite5后台管理
1
flutter3-osadmin
1
flutter3手机后台
1
vite-vue3-chat
1
vite-webchat
1
vue3-chat聊天
1
vite5仿微信
1
electron31+vue3聊天室
1
vite5+electron31仿微信
1
electron31-vite5-wechat聊天
1
electron31聊天exe
1
vue3+electron桌面聊天
1
社区赞助商