导言

沉寂了太久了，决定开始努力学习提升自己，顺便把自己的学习过程记录下来，通过这种方式鞭策自己认真学习之外，顺便能够分享自己的经验心得。 自己正好在工作中接触到Electron，想深入学习学习这方面的知识。

正文

什么是electron

开始之前，先让我们了解一下什么是Electron Electron.js（也称为Electron）是一种基于Node.js和Chromium开发的开源框架，用于构建跨平台桌面应用程序。Electron.js最初是由GitHub开发的Atom编辑器所使用的框架，现在已经成为了许多其他流行应用程序的基础，如Microsoft Visual Studio Code、Slack、Skype等。

Electron.js提供了许多跨平台的功能，例如窗口管理、菜单、对话框和托盘图标等。它还可以轻松地与Node.js模块进行集成，以便开发人员可以使用已有的Node.js生态系统中的库和工具。这使得Electron.js非常适合开发具有丰富用户界面和本地操作系统集成的桌面应用程序。

由于Electron.js使用Chromium作为其呈现引擎，因此应用程序可以获得高性能和现代Web技术的支持。同时，由于其跨平台特性，开发人员可以使用一致的开发工具和技术来构建适用于Windows、macOS和Linux等多个操作系统的应用程序。

简单点说，就是Electron提供一套方法，将nodejs和Chromium打包成一套跨平台桌面端应用

快速开始

首先我们开始先整个hello world出来

准备工作

mkdir hello_world && cd hello_world
npm init
准备好文件夹后安装依赖
注意！！这里国内安装electron依赖大概率会失败，这是由于某些不可抗拒因素导致国内网络无法正常连接github 这里我们在用户目录下新建一个.npmrc文件，然后在里面添上这样一行

electron_mirror=https://npm.taobao.org/mirrors/electron/

npm install --save-dev electron

随后在你的package.json中添加打开的应用指令

"scripts": { 
    "start": "electron ." 
}

这里我们尝试运行一下npm start
当然肯定会报错的，准备工作做完了，接下来我们开始写hello world吧

创建页面

我们先写入口文件，这里要根据packge.json里面的内容来，我的packge.json的内容如下：

{
  "name": "hello_world",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^23.1.1"
  }
}

我的入口文件设置是main.js，我们在hello_world文件夹下创建一个main.js文件，然后写入以下内容：

const {
    app,
    BrowserWindow
  } = require('electron');
  
  const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600
    });
    win.loadFile('index.html');
  }
  
  app.whenReady().then(() => {
    createWindow()
  })

这里我们创建了一个宽800高600的窗口，并把index.html填入到这个窗口里，我们这里还缺一个index.html，随便写一写就好了
然后再执行npm start

这时就能看见我们的第一个app了，是不是很简单！