Electron第一次安装使用记录，创建一个”Hello World”!-QUI-Notes

Electron是什么？

官方：Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

Electron第一次安装使用记录，创建一个”Hello World”!-QUI-Notes

安装步骤

1.安装node环境，Electron依赖于node，所以需要先安装环境；

node 安装步骤：Node.js 安装配置-Qui-Note (51qux.com)

2.创建文件夹及初始化npm包 

mkdir app && cd app
npm init

3.安装electron依赖包，并修改package.json启动配置

npm install --save-dev electron

修改配置：

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

4.创建html页面：index.html和主入口页面main.js(创建npm时候的时候的入口页面，可以在package.json配置文件中修改）

main.js内容：

const { app, BrowserWindow } = require('electron')
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  //app入口页面
  win.loadFile('index.html')
}
app.whenReady().then(() => {
  createWindow()
})

index.html内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

5.启动程序，项目以窗口方式运行。

npm start

以上就是新手安装使用electron的方法了，5步实现一个简单的窗口文件。更多详细文档请参照官方文档：
https://www.electronjs.org/zh/docs/latest/tutorial/quick-start