# electron-start

**Repository Path**: githubgay/electron-start

## Basic Information

- **Project Name**: electron-start
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-13
- **Last Updated**: 2024-08-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README




当所有功能开完成毕后，将Electron打包成不同平台的应用，Electron提供了打包的工具`Electron Forge`,但实际应用中大家用的比较多的是`electron-builder`, 接下来我们介绍的是 `electron-builder` 的使用：
1. 安装electron-builder
```bash
npm install electron-builder --save-dev
```

2. 配置脚本
```json
...
{
  "scripts": {
    ...
    "build": "electron-builder .",
    "build:mac": "electron-builder -mac",
    "build:win": "electron-builder -win",
  }
}
...
```

3. 生成图标
在项目根目录中创建build目录，再准备一张png格式的图片，将其命名为icon,png放到build中，关于图标的详细说明参见文档。

4. 执行打包任务
```bash
#打包mac系统的应用
npm run build:mac

#或打包windows系统的应用
npm run build:win
```

在打包的过程中需要下载相应平台的工具包，因此需要稳定的网络环境，大家要耐心等待。
** 注：Windows系统开发时不能打包Mac的应用。**


三、项目开发
> 在这一小节掌握Electron整合前端框架来进行开发
通过学习我们了解了Electron中是可以运行前端项目的，因此完全可以使用Vue、React、.jQuery等开发Electron项目，接下来我们选择使用ue来实现发送消息的功能。
3.1 创建项目
社区有许多整合了Vue、React和Electron的工具或模板，在这里我们来使用electron-vite来创建项目：
#引导式创建项目
```bash
npm create @quick-sEart/electron
```

项目创建好后用VS Code打开，然后安装依赖：
```bash
npm install
```
依赖安装完毕后启动项目
```bash
npm run dev
```

启动项目后修改渲染进程会自动启用了HMR,即自动刷新页面，但要主进程进行热重载重它页但！要添加`--watch`参数