环境搭建

准备nodejs环境

这里不直接下载Node.js。这里通过包管理器方式安装 Node.js中的nvm管理不同版本的Node.js。

# The script clones the nvm repository to ~/.nvm, and attempts to add the source lines from the snippet below to the correct profile file (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# 检测到有使用npm全局安装的modules
=> You currently have modules installed globally with `npm`. These will no
=> longer be linked to the active version of Node when you install a new node
=> with `nvm`; and they may (depending on how you construct your `$PATH`)
=> override the binaries of modules installed with `nvm`:

/usr/local/lib
├── hexo-cli@4.3.0
├── n@7.3.1
=> If you wish to uninstall them at a later point (or re-install them under your
=> `nvm` Nodes), you can remove them from the system Node as follows:

     $ nvm use system
     $ npm uninstall -g a_module

source ~/.zshrc

我的系统原先安装过node。

?  ~ node -v       
v14.17.4

?  ~ nvm ls              
->       system
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

?  ~ nvm use system 
Now using system version of node: v14.17.4 (npm v8.1.1)

Electron 安装

这里安装当前最新版本的Electron。

# electron的node版本要求,顺带取个别名
nvm install 16.13.0
nvm alias electron 16.13.0
nvm use electron

# 安装electron
# npm 使用文档： https://docs.npmjs.com/cli/v8/commands/npm-install
# i == install; 
# -D, --save-dev: Package will appear in your devDependencies. 
npm i -D electron@latest

# 使用npx，检测是否安装成功
# npx 使用教程：https://www.ruanyifeng.com/blog/2019/02/npx.html
?  ~ npx electron -v
v17.1.2
# ./node_modules/.bin/electron

快速入门

详见：快速入门

# 代码结构
?  my-electron-app tree -L 1                      
.
├── index.html
├── index.js
├── node_modules
├── package.json
└── preload.js

在这里插入图片描述

附录

node.js和前端js有什么区别

从使用的角度来看，区别如下：

一个是基于浏览器端的 javascript （前端 JS）；一个是基于服务端的 javascript （后端 Node.js）；两者语法一样，但组成不一样。

JavaScript：ECMAScript（语言基础，如：语法、数据类型结构以及一些内置对象）;DOM（一些操作页面元素的方法）; BOM（一些操作浏览器的方法）

Node.js：ECMAScript（语言基础，如：语法、数据类型结构以及一些内置对象）; OS（操作系统）；file（文件系统）；net（网络系统）；database（数据库）

从本质的角度来看，区别如下：

JavaScript 是一种语言。node.js 不是一种语言，而是一种运行普通 JavaScript 的“环境/软件集”。所有浏览器都有运行网页 JavaScript 的 JavaScript 引擎。Node.js 只是与一些库捆绑在一起的 V8 引擎，用于执行 I/O 和网络，因此您可以在浏览器之外使用 JavaScript（例如，创建后端服务）。

Electron是什么？

来源：简介

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