项目简介
一个入门简单、跨平台的开源免费桌面软件开发框架。
特性
- 跨平台:一套代码,可以打包成windows版、Mac版、Linux版
- 简单高效:只需学习 js 语言,同时支持vue、react、html等前端技术
- 前端独立:理论上支持任何前端技术,编写出精美的UI效果
- 工程化:可以用服务端的开发思维,来编写桌面软件
- 高性能:事件驱动、非阻塞式IO
- 功能丰富:前端、服务端的技术场景等
- 功能demo:桌面软件常见功能,后续逐步集成或提供demo
- 开源免费:数万下载量,数百家中小企业在使用
使用场景
1. 常规桌面软件
windows平台,macOS平台,linux平台 (ubuntu)
2. vue、react、angular、web 转换成桌面软件
vue-ant-design(本地),禅道项目管理(web项目地址),
3. 游戏(h5相关技术开发)
快速入门
electron-egg采用electron+node语言开发,前端几面可以用vue、react、angular等,所以需要提前安装node,npm等工具,为了顺利下载依赖,可将npm镜像设置为淘宝镜像。
- 下载源码
使用git命令从gitee下载源码或者下载zip包解压。
git clone https://gitee.com/wallace5303/electron-egg.git
目录结构如下图所示
2.安装依赖
npm install
3.配置
依赖包准备完成后,开始配置程序。有几种模式运行程序,具体可查看package.json文件,这里我们选择开发者模式,打开配置文件:
electron-egg/electron/config.js,可修改如下配置:
config.js
developmentMode: {
default: 'vue', // 默认前后端分离,使用vue
mode: {
// 前后端分离,使用vue开发,端口与vue启动的serve一致
vue: {
hostname: 'localhost',
port: 8080
},
// 前后端分离,使用react开发,端口与react启动的serve一致
react: {
hostname: 'localhost',
port: 3000
},
// ejs模板渲染
ejs: {
hostname: 'localhost',
port: 7068 // The same as the egg port
}
}
},
4.启动/运行
这里我们采用vue模式来运行。
# 1:【进入前端目录】,启动vue
cd electron-egg/frontend
npm run serve
# 2:【根目录】,启动electron服务
npm run dev
5.编写一个api,供前端使用
1)创建路由,在
electron-egg/app/router/index.js文件中,添加:
router.get('/hello', controller.v1.home.hello);
2)在控制器层中(
electron-egg/app/controller/v1/home.js),编写方法
async hello() {
const { ctx, service } = this;
const data = {
title: 'hello'
};
this.sendSuccess(data);
}
3)访问api
http://localhost:7068/hello
具体可参考官方文档:
https://www.yuque.com/u34495/mivcfg/xnhmms
用户案例