electron-app

An Electron application with Vue3 and TypeScript

Features

• 💡 Optimize asset handling
• 🚀 Fast HMR for renderer processes
• 🔥 Hot reloading for main process and preload scripts
• 🔌 Easy to debug
• 🔒 Compile to v8 bytecode to protect source code

Getting Started

Read documentation for more details.

• Configuring
• Development
• Asset Handling
• HMR & Hot Reloading
• Debugging
• Source code protection
• Distribution
• Troubleshooting

You can also use the create-electron tool to scaffold your project for other frameworks (e.g. React, Svelte or Solid).

Recommended IDE Setup

• VSCode + ESLint + Prettier + Volar + TypeScript Vue Plugin (Volar)

Project Setup

Install

$ npm install

Development

$ npm run dev

Build

# For windows
$ npm run build:win

# For macOS
$ npm run build:mac

# For Linux
$ npm run build:linux

项目结构 (Project Structure)

这是一个基于 Electron + Vite + TypeScript 的桌面应用程序项目结构，使用 Tailwind CSS 进行样式设计，并通过 electron-builder 进行打包分发。

目录结构

📁 build/

• 构建配置目录
  包含与打包相关的脚本和资源文件
  • icons/ - 应用程序图标集（不同尺寸）
  • installer.nsh - NSIS 安装脚本配置
  • scripts/ - 构建相关脚本

📁 node_modules/

• 依赖库目录
  存储所有 npm/yarn 安装的第三方依赖包
  （此目录不应手动修改）

📁 out/

• 临时输出目录
  存放开发/构建过程中生成的临时文件
  • main/ - 主进程编译输出
  • renderer/ - 渲染进程编译输出

📁 release/

• 发布目录
  最终生成的应用程序安装包和可执行文件

📁 resources/

• 资源文件目录
  包含应用程序使用的静态资源
  • icons/ - 应用程序图标资源
  • data/ - 其他静态数据文件

📁 src/

• 核心源代码目录
  应用程序的主要逻辑和界面代码
  • main/ - Electron 主进程代码
  • preload/ - Electron 预加载脚本
  • renderer/ - 渲染进程代码
    • src/ - Vite 应用源码
      • api/ - 用于与后端或外部服务进行数据交互的API请求
      • assets/ - 前端资源文件 (images, fonts, etc.)
      • components/ - UI 组件
      • config/ - 项目配置相关
      • hooks/ - 自定义 Vue Hooks
      • layout/ - 页面布局组件
      • mock/ - 模拟数据用于开发和测试
      • plugins/ - 项目插件
      • router/ - 前端路由配置
      • stores/ - 状态管理 (Pinia)
      • styles/ - 全局样式（Sass）
      • utils/ - 工具函数 (日期格式化，数据处理等)
      • views/ - 页面级别的组件 (Pages)
        • Design/ - 设计面板页面
          • CommManagement/ (通信管理)
          • ControllerManagement/ (控制器管理)
          • Controls/ (设计控制控件集合组件)
          • ImagesCapture/ (图像集 design-panel-controls)
          • LogManagement/ (日志管理)
          • Settings/ - (设置)
          • Workflow/ - (工作流)
          • index.vue - 设计面板页面入口文件。
      • App.vue - 主应用组件 (Vue.js)
      • main.ts - 渲染进程入口
      • env.d.ts - 环境变量类型定义
      • auto-imports.d.ts - 自动导入的模块类型定义
      • components.d.ts - 组件类型定义
      • index.html - HTML 入口文件
  • types/ - 全局类型定义

📁 test/

• 测试目录
  包含应用程序的各种测试
  • e2e/ - 端到端测试
  • unit/ - 单元测试
  • mocks/ - 测试用模拟数据

配置文件

⚙️ 基础配置

文件	用途
package.json	项目元数据、依赖项和 NPM 脚本
package-lock.json	锁定依赖版本确保一致性
tsconfig.json	TypeScript 基础配置
tsconfig.node.json	Node.js 环境 TypeScript 配置
tsconfig.web.json	浏览器环境 TypeScript 配置

🛠️ 构建工具

文件	用途
electron.vite.config.ts	Vite 的 Electron 专用配置
electron-builder.yml	Electron 应用打包配置
postcss.config.js	PostCSS 处理配置
tailwind.config.js	Tailwind CSS 样式框架配置

🧹 代码质量

文件	用途
.editorconfig	跨编辑器/IDE 的代码风格统一
.eslintrc.cjs	ESLint 代码检查配置
.eslintignore	ESLint 忽略文件配置
.prettierrc.yaml	Prettier 代码格式化配置
.prettierignore	Prettier 忽略文件配置

📌 其他文件

文件	用途
.gitignore	Git 版本控制忽略规则
.npmrc	npm 配置
README.md	项目说明文档

技术栈概览

• 核心框架: Electron
• 开发语言: TypeScript
• 构建工具: Vite
• UI 框架: Element Plus
• 样式方案: Tailwind CSS
• 代码质量: ESLint + Prettier
• 打包工具: electron-builder
• CSS 处理: PostCSS
• 测试框架: Vitest

Examples

• electron-vite-bytecode-example, source code protection
• electron-vite-decorator-example, typescipt decorator
• electron-vite-worker-example, worker and fork