# Electron桌面应用快速开发框架

**Repository Path**: hmz-xm/vite_electron

## Basic Information

- **Project Name**: Electron桌面应用快速开发框架
- **Description**: Electron桌面应用快速开发框架是一个用Vite+vue3基于electron开发的电脑桌面应用的框架。前端开发者用一套熟悉的vue框架就可以开发电脑应用，无需在学习其他语言。用VUE开发pc跨平台应用。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://goflys.cn/ardetail?id=3
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 47
- **Created**: 2023-11-27
- **Last Updated**: 2023-11-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue开发桌面应用框架介绍
> 我们不生产框架，我们是优秀框架的搬运工

这是一个用Vite+vue3基于electron开发跨平台电脑桌面应用的框架。前端开发者用一套熟悉的vue框架就可以开发电脑应用，无需在学习其他语言，只要你会vue前端开发就可以开发桌面应用。
<br/>
只要经过GoFly技术团队处理过的框架都会变得简单，GoFly技术团队始终坚持“大道至简”理念让开发变得简单，唯有简单才是解决开发效率和让开发者快乐办法。
## 快速开始
gitee 下载框架代码到本地
```
 git clone https://gitee.com/huang_li_shi_admin/vite_electron.git
```
## 初始项目
如果初始下载失败，请更改资源镜像（淘宝镜像）
```
 yarn install
```
## 运行项目
```
yarn dev

```
可以看到创建了一个dist-electron文件夹，同时打开了一个桌面应用
## 打包项目
```
yarn build

```
成功后会生成一个release文件夹，在里面就能看到打包好的exe安装包了。

## 安装Electron（选择安装 如果yarn install 可以跑就不用安装）
### 1.先配置下镜像
不安装下载和打包时可能会超时出错
```
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/

yarn config set electron_builder_binaries_mirror https://npm.taobao.org/mirrors/electron-builder-binaries/

```
### 2.接下来开始安装electron
```
yarn add electron -D

```
### 3.接着安装vite-plugin-electron插件
该插件用于配置electron打包编译的文件入口
``` 
yarn add vite-plugin-electron -D

```
## 开发注意事项
1. ctrl+shift+i 切换开发者控制台
2. electron框架API代码electron\renderers下添加
3. vue页面调用Electron框架的API方法在src\utils\ipcMainApi.js统一管理

## 开发文档
开发参考我们封装框架的[GoFly桌面快速开发框架文档](https://doc.goflys.cn/docview?id=33)，需要框electron请[electron官方文档](https://www.electronjs.org/zh/docs/latest/api/app)，我们框架集成了vue的UI框架方便您快速开发应用，无需自己搭建基础依赖和技术选择。
 

## 桌面应用框架预览图
![](https://admin.goflys.cn/common/uploadfile/get_image?url=resource/uploads/20231108/b024d875ec1915515dc2ffe9c285d41e.png)
![](https://admin.goflys.cn/common/uploadfile/get_image?url=resource/uploads/20231108/6546c22455fdb1ead72f94aae301f654.png)
![](https://admin.goflys.cn/common/uploadfile/get_image?url=resource/uploads/20231108/955cc5d57ca8eea16e12972ab2e87355.png)
黑暗主题
![](https://admin.goflys.cn/common/uploadfile/get_image?url=resource/uploads/20231118/3449596c7a8b5160a2088b488e837a2d.png)
打开第三方网站
![](https://admin.goflys.cn/common/uploadfile/get_image?url=resource/uploads/20231108/97e238947877651a927d841ad338f2c2.png)
播放视频
![](https://admin.goflys.cn/common/uploadfile/get_image?url=resource/uploads/20231118/b4142d39a046494f7240acfd509565d0.png)
小窗口
![](https://admin.goflys.cn/common/uploadfile/get_image?url=resource/uploads/20231118/c9a055a950b294c5cf15aba41c5a5a49.png)