# Electron Vite Ts框架

**Repository Path**: trident-framework/trident-electron-vite-ts

## Basic Information

- **Project Name**: Electron Vite Ts框架
- **Description**: 基于Electron Vite Ts v25.9.0
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-06
- **Last Updated**: 2026-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



<h1 align="center">electron-app</h1>

<p align="center">基于 Vue3 + TypeScript 的 Electron 应用程序</p>

<p align="center">
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/electron" alt="electron-version">
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/electron-vite" alt="electron-vite-version" />
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/electron-builder" alt="electron-builder-version" />
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/vite" alt="vite-version" />
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/vue" alt="vue-version" />
<img src="https://img.shields.io/github/package-json/dependency-version/alex8088/electron-vite-boilerplate/dev/typescript" alt="typescript-version" />
</p>

<p align='center'>
<img src='./build/electron-vite-vue-ts.png'/>
</p>

## 项目简介

这是一个基于 **Electron** + **Vue3** + **TypeScript** + **Vite** 构建的桌面应用程序模板（脚手架）。使用 [electron-vite](https://electron-vite.org/) 作为构建工具，提供了现代化的开发体验和高效的生产构建能力。

## 技术栈

- **前端框架**: Vue 3 + TypeScript
- **桌面框架**: Electron
- **构建工具**: Vite + electron-vite
- **状态管理**: Pinia
- **路由**: Vue Router
- **HTTP 请求**: 封装 axios 请求拦截器
- **代码规范**: ESLint + Prettier
- **打包工具**: electron-builder

## 功能特性

- 💡 优化资源处理方式
- 🚀 渲染进程热更新 (HMR)
- 🔥 主进程和预加载脚本热重载
- 🔌 便捷的调试支持
- 🔒 编译为 v8 字节码保护源代码
- 📦 跨平台打包（Windows/macOS/Linux）

## 项目结构

```
├── src
│   ├── main/                 # Electron 主进程
│   │   ├── index.ts          # 主入口，创建窗口
│   │   ├── ipc.ts            # IPC 通信处理
│   │   └── windowProxy.ts    # 窗口代理管理
│   ├── preload/              # 预加载脚本
│   │   # 暴露 API 到渲染进程
│ ├── index.ts            │   └── index.d.ts        # 类型声明
│   └── renderer/             # 渲染进程（Vue 应用）
│       ├── index.html        # HTML 入口
│       └── src/
│           ├── App.vue       # 根组件
│           ├── main.ts       # Vue 入口
│           ├── router/       # 路由配置
│           ├── store/        # 状态管理（Pinia）
│           ├── components/   # 公共组件
│           ├── views/        # 页面视图
│           ├── utils/        # 工具函数
│           │   ├── aes.ts            # AES 加密
│           │   ├── httpRequest.ts    # HTTP 请求封装
│           │   ├── eventBus.ts       # 事件总线
│           │   ├── helper.ts         # 辅助函数
│           │   └── constant.ts       # 常量定义
│           ├── assets/       # 静态资源
│           │   ├── css/      # 样式文件
│           │   ├── fonts/    # 字体图标（iconfont）
│           │   └── images/   # 图片资源
│           └── types/        # 类型定义
├── build/                    # 构建配置
│   └── entitlements.mac.plist
├── resources/                # 应用资源
├── electron.vite.config.ts   # electron-vite 配置
├── electron-builder.yml      # electron-builder 配置
└── package.json
```

## 快速开始

### 环境要求

- Node.js >= 18.x
- npm >= 9.x

### 安装依赖

```bash
npm install
```

### 开发模式

启动开发服务器：

```bash
npm run dev
```

### 构建打包

```bash
# Windows
npm run build:win

# macOS
npm run build:mac

# Linux
npm run build:linux
```

## 推荐 IDE 配置

- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)

## 文档

更多详细文档请访问 [electron-vite 官方文档](https://electron-vite.org/)：

- [配置说明](https://electron-vite.org/config/)
- [开发指南](https://electron-vite.org/guide/dev.html)
- [资源处理](https://electron-vite.org/guide/assets.html)
- [热更新 HMR](https://electron-vite.org/guide/hmr.html) & [热重载](https://electron-vite.org/guide/hot-reloading.html)
- [调试](https://electron-vite.org/guide/debugging.html)
- [源代码保护](https://electron-vite.org/guide/source-code-protection.html)
- [打包分发](https://electron-vite.org/guide/distribution.html)
- [问题排查](https://electron-vite.org/guide/troubleshooting.html)

## 相关示例

- [electron-vite-bytecode-example](https://github.com/alex8088/electron-vite-bytecode-example) - 源代码保护示例
- [electron-vite-decorator-example](https://github.com/alex8088/electron-vite-decorator-example) - TypeScript 装饰器示例
- [electron-vite-worker-example](https://github.com/alex8088/electron-vite-worker-example) - Worker 和 fork 示例

## License

MIT License