首先是初始的Node.js环境在此基础上开始搭建一个工程的基础项目

1.创建一个node工程

npm init -y	

使用npm命令创建一个package.json并修改其中的相关内容

{
  "name": "test",
    "version": "1.0.0",
    "main": "main.js",
    "scripts": {
    "start": "electron ." //start命令⽤于启动整个应⽤
  },
  "author": "tianyu", //为后续能顺利打包，此处要写明作者。
    "license": "ISC",
    "description": "this is a electron demo", //为后续能顺利打包，此处要编写描述。
    }

2.安装electron作为开发依赖

npm i electron -D

3.创建main.js

/*
 main.js运⾏在应⽤的主进程上，⽆法访问Web相关API，主要负责：控制⽣命周期、显示界⾯、
控制渲染进程等其他操作。
*/
const { app, BrowserWindow } = require('electron')
// ⽤于创建窗⼝
function createWindow() {
  const win = new BrowserWindow({
    width: 800, // 窗⼝宽度
    height: 600, // 窗⼝⾼度
    autoHideMenuBar: true, // ⾃动隐藏菜单栏
    alwaysOnTop: true, // 置顶
    x: 0, // 窗⼝位置x坐标
    y: 0 // 窗⼝位置y坐标
  })
  // 加载⼀个远程⻚⾯
  win.loadURL('http://www.atguigu.com')//加载线上的网址
  win.loadFile('./pages/index.html')//加载本地的html文件
}
// 当app准备好后，执⾏createWindow创建窗⼝
app.on('ready',()=>{
 createWindow()
 // 当应⽤被激活时
 app.on('activate', () => {
 //如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝
 if (BrowserWindow.getAllWindows().length === 0) createWindow()
 })
})
// 当所有窗⼝都关闭时
app.on('window-all-closed', () => {
 // 如果所处平台不是mac(darwin)，则退出应⽤。
 if (process.platform !== 'darwin') app.quit()
})

此时开发者⼯具会报出⼀个安全警告，需要修改 index.html ，配置 CSP(Content Security-Policy)

在html文件中加入如下内容

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">

完成以上的步骤就可以使用npm start运行了

4.使用nodemon实现自动重启

使用以下命令安装nodemon

npm install nodemon -D  

在package.json中修改启动命令

"scripts": {
  "start": "nodemon --exec electron ."
},

新建一个nodemon.json文件，并更改配置

{
 "ignore": [
 "node_modules",
 "dist"
 ],
 "restartable": "r",
 "watch": ["*.*"],
 "ext": "html,js,css"
}