06_Electron项目：实现一个类似 EditPlus 的简易记事本代码编辑器

项目地址： https://gitee.com/qiao728/notepad.git

一、项目介绍

使用 Electron Html Css Js Nodejs 实现一个类似于 EditPlus 的记事本编辑器的小小编辑器，此项目的主要目的是让大家巩固前面学的知识点以及灵活运用 Electron 中的模板。

二、项目涉及的知识点

1、Electron-forge 的使用
2、Electron BrowserWindow 的使用
3、Electron 自定义软件顶部菜单、自定义右键菜单、菜单绑定快捷键等
4、Electron 主进程与渲染进程通信
5、Electron 中使用 Nodejs
6、Electron 中使用 Html5 API
7、Electron Shell 模块
8、Electron Dialog 模块实现文件保存新建
9、Electron BrowserWindow 实现打印功能

三、详细步骤说明

1、创建项目

注意点

当前我的 Node 版本是 14.18.0。 所以 安装 electron-forge 脚手架的版本是 6.4.2 版本。
如果你的node 环境是低于 16 需要按照自己的 node 环境进行不同版本的安装，.否则会失败

执行完 electron-forge init notepad 之后我们的项目 就创建好了

命令代码

npm install -g @electron-forge/cli
electron-forge init my-new-app
cd my-new-app
npm start

2、打开项目

进入目录后， 通过 code . 可以直接进入代码编辑器中

使用 npm run start 启动项目，启动后的展示

3、顶部菜单

4、右键菜单

5、通过 nodemon 模块配置热加载

通过前面的项目我们会发现修改完成主进程文件后需要重新运行。有没有一种方法可以让我们修改完成文件自动重启项目呢？

nodemon 模块介绍

nodemon 是一个命令行工具，用来辅助项目开发。在 Nodejs 中，可以在每次修改文件后重新执行该文件

https://www.npmjs.com/package/nodemon

安装 nodemon

可以全局安装也可以在当前项目中安装
项目中安装

npm install --save-dev nodemon

全局安装

npm install -g nodemon

监听项目

package.json 中 scripts 配置

 "dev": "nodemon --watch src --exec \"electron-forge start\"",

默认监听 js 文件的变化

如果想要监听 其他文件的变化就再加上 -e js,css,html 配置

"dev": "nodemon -e js,css,html --watch src --exec \"electron-forge start\"",

让渲染进程通过顶部 重新加载按钮进行更新，主进程才重新启动项目的配置

"scripts": {
    "dev": "nodemon  --watch src/main --exec \"electron-forge start\"",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "echo \"No linting configured\""
  },

项目地址： https://gitee.com/qiao728/notepad.git