# electron_vue3

**Repository Path**: IT-bear/electron_vue3

## Basic Information

- **Project Name**: electron_vue3
- **Description**: 一个开箱即用的 electron框架,使用 electron + Vue + ElementPlus + Vite + Ts 搭建
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: https://gitee.com/IT-bear
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 4
- **Created**: 2024-10-30
- **Last Updated**: 2026-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 桌面开发, Electron, Vue, TypeScript, vite

## README

# Electron + Vue3 开发模板

一个基于 Electron + Vue3 + Vite7 的桌面应用开发模板，集成了主流前端技术栈，开箱即用。

## 技术栈

| 类别       | 技术                       |
| ---------- | -------------------------- |
| 构建工具   | Vite 7                     |
| 桌面框架   | Electron v40.3.0           |
| 前端框架   | Vue 3 (Composition API)    |
| UI 组件库  | Element Plus               |
| 路由管理   | Vue Router                 |
| 状态管理   | Pinia                      |
| HTTP 请求  | Axios 或 Fetch 或 IPC 代理 |
| 本地数据库 | better-sqlite3             |
| 消息通信   | MQTT                       |
| 样式方案   | SCSS                       |
| 代码规范   | ESLint + Prettier          |

## 项目特性

- **Composition API**：基于 Vue3 `<script setup>` 语法糖开发
- **双进程架构**：主进程 + 预加载 + 渲染进程分离
- **数据库支持**：集成 SQLite 本地数据库
- **MQTT 集成**：支持消息订阅发布
- **全局键盘监听**：内置键盘事件处理工具
- **按需加载**：组件自动导入配置
- **国内镜像优化**：Electron 二进制下载加速

## 目录结构

```
electron_vue3
├── resources/                  # 静态资源（图标等）
├── src/
│   ├── main/                   # Electron 主进程
│   │   ├── ipcHandlers/        # IPC 通信处理
│   │   ├── sqlHandlers/        # 数据库操作
│   │   ├── index.ts            # 主进程入口
│   │   └── secondaryWindow.ts  # 副屏窗口
│   ├── preload/                # 预加载脚本
│   │   ├── db/                 # 数据库 API
│   │   └── index.ts
│   ├── renderer/               # 渲染进程（前端）
│   │   └── src/
│   │       ├── api/            # 接口文件
│   │       ├── assets/         # 静态资源
│   │       ├── components/     # 公共组件
│   │       ├── layout/         # 布局组件
│   │       ├── router/         # 路由配置
│   │       ├── store/          # 状态管理
│   │       ├── utils/          # 工具函数
│   │       └── views/          # 页面视图
│   └── services/               # 数据库服务
├── build/                      # 打包配置
├── electron.vite.config.ts     # Vite 配置
├── electron-builder.yml        # 打包工具配置
└── package.json
```

## 环境要求

- **Node.js**：>= v22.12.0
- **npm**：>= v10.9.0
- **操作系统**：Windows 10+（其他平台需自行适配）

## 安装

由于 Electron 二进制文件国内下载较慢，项目提供了多种加速方式：

### 方式一：使用内置镜像脚本（推荐）

```bash
npm run install:mirror
```

### 方式二：PowerShell 临时变量

```powershell
$env:ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"; $env:ELECTRON_BUILDER_BINARIES_MIRROR="https://npmmirror.com/mirrors/electron-builder-binaries/"; npm install
```

### 方式三：CMD 临时变量

```cmd
set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

set ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

npm install
```

### 常见问题

如果遇到 `better-sqlite3` 依赖报错，请先执行：

```bash
npm run postinstall
```

## 运行

### 开发模式

```bash
npm run dev
```

### 生产模式

```bash
npm run start
```

## 打包

打包前请先删除 `dist` 文件夹：

```bash
rmdir /s /q dist
```

### Windows

```bash
npm run build:win
```

### macOS

```bash
npm run build:mac
```

### Linux

```bash
npm run build:linux
```

## 页面跳转

项目已配置 Vue Router，跳转方式：

```typescript
import { useRouter } from 'vue-router'

const router = useRouter()
router.push('/login')
```

或使用锚点方式：

```javascript
location.href = '#/login'
```

## 扩展说明

- 框架已集成全局键盘监听功能，可用于扫码枪等外设输入
- MQTT 服务已配置，可直接使用
- SQLite 数据库已初始化基础方法，可按需扩展
- ESLint 配置可根据团队规范自行调整

## 开源协议

MIT License

---

如有问题或建议，欢迎在评论区留言交流。喜欢请点个 Star！