andy380743909 / v3-electron-vite

简介

🥳 Electron + Vue3 + Vite + Pinia + Element-Plus + TypeScript.

src 渲染进程中源码来自 v3-admin-vite.

运行项目

# 配置
1. 安装 .vscode 中推荐的插件
2. node 版本 16+

# 克隆项目
git clone https://github.com/un-pany/v3-electron-vite.git

# 进入项目目录
cd v3-electron-vite

# 安装依赖
pnpm i

# 初始化 husky
pnpm prepare

# 启动服务
pnpm dev

# 升级所有依赖
pnpm up --latest

打包

# 打包成安装程序
pnpm build

# 打包成解压后的目录
pnpm build:dir

代码格式检查

pnpm lint

目录结构

├── dist                构建后
├   ├── main
├   ├── preload
├
├── script
├   ├── main            主进程源码
├   ├   ├── index.ts
├   ├── preload         预加载脚本源码
├   ├   ├── index.ts
├
├── src                 渲染进程源码
├
├── static              静态资源
├   ├── icons           系统图标

渲染进程使用 Node API

🚧 因为安全的原因 Electron 默认不支持在 渲染进程 中使用 NodeJs API

推荐所有的 NodeJs、Electron API 通过 preload-script 注入到 渲染进程中，例如：

• src/preload/index.ts

  import { contextBridge, ipcRenderer } from "electron"
  
  // --------- Expose some API to Renderer process. ---------
  contextBridge.exposeInMainWorld("$ipcRenderer", withPrototype(ipcRenderer))

• src/@types/shims-vue.d.ts

  interface Window {
    $ipcRenderer: typeof import("electron")["ipcRenderer"]
  }

Git 提交规范

• feat 增加新的业务功能
• fix 修复业务问题/BUG
• perf 优化性能
• style 更改代码风格, 不影响运行结果
• refactor 重构代码
• revert 撤销更改
• test 测试相关, 不涉及业务代码的更改
• docs 文档和注释相关
• chore 更新依赖/修改脚手架配置等琐事
• workflow 工作流改进
• ci 持续集成相关
• types 类型定义文件更改
• wip 开发中

站在巨人的肩膀上

• electron-vite-vue
• electron-vue-admin
• fast-vue3