Electron学习1 安装环境与第一个程序

[一、 Electron 简介](#一、 Electron 简介)
[二、安装 nvm](#二、安装 nvm)
三、安装nodejs
四、安装nrm
五、安装electron
- [1. npm 初始化](#1. npm 初始化)
- [2. 创建 package.json](#2. 创建 package.json)
- [3. 安装electron](#3. 安装electron)
- [4. 创建一个页面](#4. 创建一个页面)
- [5. 创建文件main.js](#5. 创建文件main.js)
- [6. 创建预加载器文件 preload.js](#6. 创建预加载器文件 preload.js)
- [7. 启动程序](#7. 启动程序)
六、打包

一、 Electron 简介

Electron是一个用于构建跨平台桌面应用程序的开源库。它使用HTML、CSS和JavaScript等技术，通过将Web技术打包为原生应用程序，使得开发者能够创建出具有本地操作系统特性的软件。Electron使用Chromium作为渲染引擎，并允许开发者使用Node.js来访问底层系统资源。

本文将介绍electron开发环境配置。

准备环境：

windows10
一款编辑器软件，如vscode

二、安装 nvm

nvm（Node Version Manager）是一个用于管理Node.js版本的工具，它允许你在同一台机器上安装和切换多个Node.js版本。

nvm的主要功能包括：

安装多个Node.js版本：你可以使用nvm安装多个Node.js版本，并在需要时进行切换。这使得你可以在同一台机器上测试不同版本的Node.js应用程序。
切换Node.js版本：使用nvm，你可以轻松地在不同版本的Node.js之间进行切换，只需运行nvm use [version_number]即可。
创建独立的Node.js环境：你可以使用nvm为每个项目创建一个独立的Node.js环境，这样每个项目都可以使用其自己的Node.js版本，而不必担心版本冲突。
安装npm包：你可以使用nvm安装npm包，并确保它们与当前的Node.js版本兼容。

nvm 下载地址：

https://github.com/coreybutler/nvm-windows/releases

下载exe程序双击安装即可。

按提示，安装完以后，命令行运行：

bash 复制代码

nvm --version

可以查看到打印出版本信息。下面使用nvm来安装nodejs。

三、安装nodejs

bash 复制代码

nvm list available
nvm install 16.16.0

在列出的可用版本里选择一个版本进行安装。

上面示例安装了16.16.0版本。

安装后，激活默认nodejs版本。

bash 复制代码

nvm use 16.16.0
nvm on

四、安装nrm

nrm 是 npm 的源管理工具，可以方便地添加、切换和删除 npm 源。nrm 的全称是 "npm Resource Manager"，旨在帮助开发者管理 npm 源的配置和切换。

使用 nrm，你可以轻松地在不同的 npm 源之间进行切换，而无需手动修改 npm 的配置文件。这对于在多个项目之间切换或者使用不同的 npm 源时非常有用。

bash 复制代码

# 安装 nrm
npm install -g nrm
# 列出可用源
nrm ls
# 使用指定源
nrm use taobao

其它还有添加、删除源等功能，平时并不常用。

五、安装electron

1. npm 初始化

bash 复制代码

mkdir my-electron-app && cd my-electron-app
npm init

在文件夹里创建以下文件：

2. 创建 package.json

json 复制代码

{
  "name": "my-electron-app",
  "version": "1.0.0",
   "scripts": {
    "start": "electron ."
  },
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

3. 安装electron

bash 复制代码

npm install --save-dev electron

4. 创建一个页面

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>Electron , 你好!</h1>
  </body>
</html>

5. 创建文件main.js

js 复制代码

const {app, BrowserWindow} = require('electron')
const path = require('path')

const createWindow = ()=>{
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    });
    win.loadFile('index.html');
};

app.whenReady().then(()=>{
    createWindow();

    // 苹果在退出后仍驻留
    app.on('activate', ()=>{
        if (BrowserWindow.getAllWindows().length === 0 ){
            createWindow();
        }
    });
});

app.on("window-all-closed", ()=>{
    if(process.platform !== 'darwin') app.quit();
});

6. 创建预加载器文件 preload.js

js 复制代码

window.addEventListener('DOMContentLoaded', () => {
    // 暂时什么都不做
})

文件夹示例：

7. 启动程序

bash 复制代码

npm start

六、打包

使用命令：

bash 复制代码

# 将 Electron Forge 添加到您应用的开发依赖中，并使用其"import"命令设置 Forge 的脚手架
npm install --save-dev @electron-forge/cli
npx electron-forge import
# 制作分发包
npm run make

生成结果示例：