Skip to content

BWrong/electron-vue3

Repository files navigation

Electron-vue3

基于electron和vue3搭建的桌面端项目模板。

本模板采用electron-vite-vue为雏形搭建。

客户端打包使用electron-builder,相关配置在/electron-builder.js中配置。

为了更好的支持深色模式,UI框架选择NaiveUI

image-20220424000800330

关于更新

自动更新需要证书,所以目前只能通过请求检查是否有新版本,然后下载,引导用户手动升级。 将VITE_UPDATE_HOST设置为安装包对应的服务器地址即可,更新逻辑已写好, 见'./packages/main/modules/updater.ts',下载时dock栏有进度条。

image-20220424000859857

image-20220424000940431

WX20220423-181429@2x

深色模式

image-20220424001051295

image-20220424001120604

导出配置

image-20220424001524105

优化包体积

默认electron-builder会将dependencies的依赖拷贝进包中,但是由于我们已经vite进行了打包,所以其实是不需要再拷贝dependencies,建议非平台编译的依赖,都放在devDependencies中,可以有效减少打包体积。

TODO

  • 基本框架搭建
  • 数据存储: electron-store
  • vue devtools
  • 自动更新
  • 托盘图标
  • 环境变量支持
  • 安全化
  • 自定义titlebar
  • 主题模式切换
  • builder配置