创建electron-vite项目前提条件 node: >= 18 pnpm: >= 8.8.0 项目特点基于elec

前提条件

node: >= 18
pnpm: >= 8.8.0

项目特点

基于electron-vite
整合vue3
整合pinia
整合vue-router
整合tailwindcss
整合element-plus
整合sqlite3
整合scss
整合log4js
支持vue3组件自动引入
支持在渲染器目录使用别名
整合inversify实现依赖注入

创建基本的`electron-vite`项目

使用cli工具创建项目

pnpm create @quick-start/electron

按照命令提示一步步的操作，最终形成如下类似的项目结构。

笔者项目创建成功后，项目中使用的electron-vite版本为: "electron-vite": "^2.0.0"

笔者项目创建成功后，项目中使用的electron版本为: "electron": "^28.2.0"

项目结构

electron-vite-app              
├─ build                       
│  ├─ entitlements.mac.plist   
│  ├─ icon.icns                
│  ├─ icon.ico                 
│  └─ icon.png                 
├─ resources                   # 公共静态资源目录(如:图片,json文件等)
│  └─ icon.png                 
├─ src                         
│  ├─ main                     # 主进程文件目录
│  │  └─ index.ts              
│  ├─ preload                  # 预加载脚本目录
│  │  ├─ index.d.ts            
│  │  └─ index.ts              
│  └─ renderer                 # 渲染器目录(vue项目文件目录)
│     ├─ src                   
│     │  ├─ assets             
│     │  │  ├─ base.css        
│     │  │  ├─ electron.svg    
│     │  │  ├─ main.css        
│     │  │  └─ wavy-lines.svg  
│     │  ├─ components         
│     │  │  └─ Versions.vue    
│     │  ├─ App.vue            
│     │  ├─ env.d.ts           
│     │  └─ main.ts            
│     └─ index.html            
├─ dev-app-update.yml          
├─ electron-builder.yml        
├─ electron.vite.config.ts     
├─ package.json                
├─ pnpm-lock.yaml              
├─ README.md                   
├─ tsconfig.json               
├─ tsconfig.node.json          
└─ tsconfig.web.json

主要script说明

dev: 启动本地开发
start: 预览打包后的结果
build: 资源打包到out目录
build:win: 打包为exe文件

完整代码详见：free pan/electron-vite-app (gitee.com)

在渲染进程调用自定义桥函数过程

渲染进程: 从electron的浏览器脚本中，发起对协调者注入的api方法调用

自定义桥函数: 定义在主进程目录的函数，通过ipcMain.handle('事件名',()=>{xxx})将事件监听函数注册到主进程

协调者: 预加载脚本是协调者，通过contextBridge.exposeInMainWorld('api', api)将一系列的api方法，注入到electron的浏览器中，其方法内部是通过ipcRenderer.invoke('createDocument', name)方式，对真正的自定义桥函数发起调用