使用create-react-app 创建 Electron 桌面应用

使用create-react-app 创建 Electron 桌面应用

如何创建一个最简单的electron桌面应用？

electron-quick-start

git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start
npm i
// 运行应用
npm start

这个时候就可以看到应用跑起来了。

react+electron

接下来使用create-react-app创建 electron 项目。

npm i -g create-react-app
create-react-app electron-react
cd electron-react

1. 安装electron 以及添加启动命令

   npm i -S electron// 在package.json 中添加electron 启动命令 和 编译命令
   "electron-start": "electron . --env dev",
   "electron-build": "npm run build && electron . --env build"

2. 在react的最外层目录创建electron的主进程文件 main.js， 内容直接拷贝electron-quick-start仓库中的main.js

3. 在React项目中的package.json文件中增加main字段，值为”main.js”

4. 在文件package.json中添加字段 “homepage”:”.”

5. 还需要修改一下main.js 的内容，以便于对应 dev 和 build 状态下都能够两个命令就运行我们的electron 应用。

   // 声明一个全局变量
   // 获取命令中带的参数
   const argv = process.argv.slice(2)// 对createWindow 函数中的内容进行修改
   //判断是否是开发模式if (argv && argv[1] == 'dev') {mainWindow.loadURL("http://localhost:3000/")} else if (argv && argv[1] == 'build') {// window 加载build好的html.mainWindow.loadURL(url.format({pathname: path.join(__dirname, './build/index.html'),protocol: 'file:',slashes: true}))}

   <

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！