1 electron官网
electron中文网 https://electronjs.org/docs
2 基于vue
1.electron-vue
官网 https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
不足之处：根据官网运行项目后发现如下图
1.不足electron 版本太低
2.官方给的升级相关不确定 不论是vue即将突出的3.0 还是ts等新特性
3.官方代码submit 截日2018年10月23日 可见目前无人维护
为了解决问题1 我直接修改了package.json 中electron 版本号为目前最新等6.0.10
发现并解决了一个问题 界面变白并且 报错的问题。
Uncaught ReferenceError: require is not defined
at (index):
(index):1 Uncaught ReferenceError: process is not defined
at (index):1
Uncaught ReferenceError: module is not defined
at renderer.js:1
解决方案 在 mian.js中添加 即可
webPreferences: {
nodeIntegration: true,
},
添加在main.js下
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
},
height: 563,
useContentSize: true,
width: 1000,
});
升级好之后的版本号为
考虑到我们项目后续可能会升级vue版本以及迭代 所以放弃了以及不更新维护的electron-vue
2.vue-cli-plugin-electron-builder
另外一个推荐的基于vue的electron项目 只适用于vue-vli 3.0 版本及其以上
官网 https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html
也做了简单的尝试 由于目前使用人数少 及项目贡献团队只有9人 也暂时放弃
2.基于react和Electron 项目（vue同理 只不过把react-cli 改为vue-cli 进行创建不同的项目）
推荐一个基于react 自己搭建 electron的方法
网站 https://www.jianshu.com/p/ea0852003209
我简单的描述下步骤
准备工作
1.安装node环境
下载node安装包（8.0以上版本）：
https://nodejs.org/zh-cn/
安装过程不做赘述。
2.安装react脚手架
在终端输入以下代码进行React脚手架安装
npm install --global create-react-app
因为长城的原因，使用前请切换源，具体切换方法请参考:
https://blog.csdn.net/qq_27818541/article/details/62886790?locationNum=4&fps=1
创建React
1.脚手架安装完成后，执行以下命令，创建一个名为demo的应用
2.看到以下提示React项目即创建完成
3.继续输入以下命令，启动本React项目
cd demo
npm start
4.react 项目启动成功
把Electron和React结合
Create React App创建的项目是一个纯前端项目，把React项目整合进electron才是桌面端开发的开始。为了开发方便，同时还需保留热调试。
1.安装electron,在刚创建好的react项目文件夹中（demo文件夹），打开终端输入
npm install electron --save --dev
在package.json文件中看到已安装好electron
在脚本中添加以下代码，作为启动electron框架的命令
"electron-start": "electron ."
2.在于package.json的同级新建一个名为mian.js的文件，文件内容可直接拷贝electron-quick-start项目中的文件:https://github.com/electron/electron-quick-start/blob/master/main.js
3.在package.json文件中，指定main.js作为electron的入口文件
4.(试探性)启动electron
npm run electron-start
能成功启动，说明electron的安装及入口文件配置没问题。
界面一片空白是因为我们的项目并没有和electron整合起来，下面把react项目整合进electron中
5.打开main.js，修改其中内容加载地址（暂且这么称呼），找到这里mainWindow.loadUrl方法
为了看到效果我们修改为这样：
6.重新启动整个项目，查看效果
这里需要同时启动两个终端，一个用来启动React项目
npm start
一个用来启动electron
npm run electron-start
Q:为什么会把electron内容加载地址改为localhost:3000？
A:因为react项目启动后的地址为localhost:3000，就是为了把启动后的项目加载进入electron中。同时因为React项目默认是有热更新，所以可以保证electron中的视图会随着react项目的修改而实现热调试
如果是vue的话 地址就要改为localhost:8080
当然我用vue-cli 也做了同样的调试依旧可行 只不过把react-cli创建一个app的过程，改为通过vue-cli创建而已
其中需要注意的有两点
1.
//配置build打包后的环境
mainWindow.loadFile(`dist/index.html`)
//结合热编译和当前开发环境关联看效果
mainWindow.loadURL('http://localhost:8080')
// 打开开发者工具
mainWindow.webContents.openDevTools()
3.最终使用的是 electron-react-boilerplate
为什么使用？
1.官方推荐
2.目前依旧维护并且使用人数较多 issues 回答频繁
github https://github.com/electron-react-boilerplate/electron-react-boilerplate
官网 https://electron-react-boilerplate.js.org/docs/installation
后续踩坑还会更新
希望可以通过前端技术 创建用户使用方便的桌面应用～～～
