1. 安装node坏境 版本10.0以上 为了用到一些小插件
安装cnpm 淘宝镜像
2.安装 electron
3.安装react 用全家桶创建项目
npx命令是局部用 不需要全局安装create-react-app
npx create-react-app project-name
4.在project-name文件夹下常见main.js
main.js 写入以下内容 （electron 运行的代码）
const {app, BrowserWindow} = require('electron')
const isDev = require('electron-is-dev')
let mainWindow
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 1024,
height: 680,
webPreferences: {
nodeIntegration: true
}
})
const urlLocation = isDev ? 'http://localhost:3000' : 'xxx'
mainWindow.loadURL(urlLocation)
})
5.修改package.json 文件
添加 "main" : "main.js"
添加 "scripts": {
"dev": "electron ."
}
此时打开俩个终端控制台执行命令
第一个执行 npm start
第二个执行 npm run dev
现在浏览器会打开一个程序 桌面应用也会打开 ( 不是完美的解决方案)
以下是完美的解决方案
安装 cnpm install electron-is-dev --save-dev
安装 cnpm install concurrently --save-dev
安装 cnpm install cross-env --save-dev
安装 cnpm install wait-on --save-dev
修改package.json 文件
"scripts": {
"dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""
}
