「从零到一打造现代桌面应用：基于 Electron + Vite + Vue3 + TypeScript 的高效开发模板」

从零到一打造现代桌面应用：基于 Electron + Vite + Vue3 + TypeScript 的高效开发模板

在前端开发日益成熟的今天，越来越多的开发者希望用熟悉的 Web 技术栈来开发桌面应用。Electron 让这一切成为可能，但如何让项目结构更现代、开发体验更丝滑、前后端通信更安全高效？

带着这些思考，我基于 Electron、Vite、Vue3 和 TypeScript，搭建了一个桌面应用开发模板 ------ electron-vite-template。

这个项目不仅集成了主线程服务的自动注册、前端 API 的自动生成，还支持 SQL 查询、表格自动生成等实用功能，大大提升了开发效率和代码可维护性。本文将带你了解这个模板的设计思路、核心亮点以及如何快速上手，助你轻松开启现代桌面应用开发之旅！

项目地址

👉 github.com/luckymiaow/...

为什么要做这个模板？

在实际开发 Electron 应用时，常常会遇到以下痛点：

前后端通信代码重复、类型不统一，维护成本高
主线程服务注册繁琐，容易遗漏
数据管理界面开发效率低，表格、SQL 查询等功能需要重复造轮子
项目结构混乱，难以扩展和维护

为了解决这些问题，我设计了这个模板，目标是让开发者专注于业务本身，而不是重复的工程化细节。

项目亮点

⚡ 现代技术栈：Electron + Vite + Vue3 + TypeScript，开发体验极佳
🛠️ 主线程服务自动注册：通过装饰器自动注册 IPC 服务，前后端类型强关联
🔗 API 自动生成：一键生成前端 API，调用方式统一，类型安全
🗃️ 集成 TypeORM：支持 SQL 查询与实体表格自动生成，适合数据管理场景
📦 工程体系完善：支持热更新、类型推断、自动导入
🧩 结构清晰：主进程、渲染进程分离，易于扩展和维护
🖥️ 多窗口管理：满足复杂桌面应用需求

目录结构一览

csharp 复制代码

electron-vite-template/
├─ electron/           # Electron 主进程相关代码
│  ├─ db/              # 数据库相关（实体、数据源、工具等）
│  ├─ services/        # 主进程服务（如窗口、用户、图书等，支持自动注册）
│  ├─ main.ts          # 主进程入口
│  └─ preload.ts       # 预加载脚本
├─ src/                # 渲染进程（前端）代码
│  ├─ api/             # 自动生成的前端 API
│  ├─ components/      # Vue 组件
│  ├─ pages/           # 页面
│  └─ main.ts          # 前端入口
├─ public/             # 静态资源
├─ gen_api.ts          # API 自动生成脚本
├─ package.json        # 项目依赖与脚本
└─ README.md           # 项目说明

核心设计与用法

1. 后端服务封装（@/electron/services）

所有主进程服务统一放在 electron/services/ 目录下。通过装饰器（如 @IpcHandle、@IpcOn、@IpcOnce）自动注册 IPC 通信方法。只需在服务类中为方法添加装饰器，即可自动暴露给前端调用，无需手动注册。

示例：

ts 复制代码

import { IpcHandle } from '装饰器路径';

export class BookService {
  @IpcHandle
  async getBooks() {
    // 查询数据库并返回
  }
}

2. API 自动生成与前端调用

运行 gen_api.ts 脚本，会自动扫描 electron/services/ 目录下所有带装饰器的方法，生成类型安全的前端 API 封装，输出到 src/api/index.ts。

bash 复制代码

npm run dev

生成后的 API 代码会自动根据服务和方法名，封装为 api.服务名.方法名() 的调用方式，类型与后端服务强关联。

前端调用示例：

ts 复制代码

import { api } from '@/api';

const books = await api.BookService.getBooks();

支持类型推断和自动补全，开发体验极佳。

快速开始

安装依赖
bash 复制代码
```
npm install
```
启动开发环境
bash 复制代码
```
npm run dev
```
启动后会自动打开 Electron 应用窗口，支持热更新。
打包应用
bash 复制代码
```
npm run build
```
构建生产环境包，输出到 dist 目录。

结语

如果你也在寻找一个高效、现代、类型安全的 Electron 桌面应用开发模板，欢迎 Star 和 Fork：electron-vite-template。

如有建议或问题，欢迎在 GitHub Issue 区留言交流！

项目地址：github.com/luckymiaow/...

「从零到一打造现代桌面应用：基于 Electron + Vite + Vue3 + TypeScript 的高效开发模板」