Electron: 1、从零开始写一个记事本app

Electron: 从零开始写一个记事本app

Electron介绍

       原文版权属于 简书 的 鳗驼螺，这里只是做了重现，并记录到自己的日记中。

       简单来说，Electron就是可以让你用Javascript、HTML、CSS来编写运行于Windows、macOS、Linux系统之上的桌面应用的库。本文的目的是通过使用Electron开发一个完整但简单的小应用：记事本，来体验一下这个神器的开发过程。本文犹如Hello World一样的存在，是个入门级笔记，但如果你之前从未接触过Electron，而又对它有兴趣，某想信这会是一篇值得一看的入门教程。

开发环境安装

1、安装Node.js

       Mac下可直接使用 node官网的 node-v8.9.4.pkg进行安装。

1、安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、安装Electron

cnpm install -g electron

3、安装Electron-forge

cnpm install -g electron-forge

       Electron-forge 是一个类似于傻瓜开发包的Electron工具整合项目。

4、新建项目

       1. 进入到日常开发的工作目录如 ~/IdeaProjects/

       2. 执行下面的命令来生成名为notepad的项目文件夹，同时安装项目所需要的模块、依赖项等。

electron-forge init notepad

       3. cd到 notepad 目录下，执行下面的命令来启动app。

       4. 这样就可以看到基本的app界面了。

模板文件

       1. 这里本人使用 WebStorm 来开发此 app。
       2. 使用 WebStorm 打开 notepad 文件夹，可以看一下项目的目录结构：node_modules 文件夹下是各种类库，src下是 app 的源代码文件，package.json 是描述包的文件。

       3. 看一下 package.json，注意这里默认已经将主进程入口文件配置为 index.js（而不是 main.js）

       为避免后面混乱，某还是将这里的src/index.js改成src/main.js，同时也要将文件index.js改名为main.js。