环境搭建

准备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_modulesource ~/.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有什么区别

相关链接：node.js和前端js有什么区别-知乎 | newbie: JavaScript VS Node JS - stackoverflow

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

一个是基于浏览器端的 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——不需要本地开发经验。

参考资料

Electron开发实战 - 邓耀龙 - p1~p6

Electron文档 - 快速入门

《Electron实战》 - 刘晓伦 - 第2章轻松入门

Electron开发环境的搭建相关推荐

electron 开发环境搭建
electron开发环境的搭建共包括两个部分:一.动态链接库(dll)编译部分:二.Native模块编译部分 tips:cnpm和npm的依赖可能不同,npm安装时可以通过任务管理器查看网速 ``` ...
如何搭建Electron开发环境
原文发表于 https://lleohao.github.io/2017/09/02/如何搭建Electron开发环境/ 这个项目结构是我在编写基于Electron 和 Angular 的七牛文件上 ...
android笔记1——开发环境的搭建
Long Long ago...已经成为了历史,我还是要说出一个真相:早年前,那时候,android还不被大众所认知的时候,当然开发人员也没不像如今那样趋于饱和状态.一位大牛前辈,也是我的学长,那时候 ...
Java开发环境的搭建以及使用eclipse从头一步步创建java项目
原文:出自本人的Linux博客http://blog.csdn.net/unix21/article/details/18813173 一.Java 开发环境的搭建这里主要说windows环境下怎么 ...
Java开发环境的搭建以及使用eclipse创建项目
一.Java 开发环境的搭建这里主要说windows环境下怎么配置Java环境.如果是Linux环境参考本博客另一篇文章即可: Linux环境安装卸载JDK 1.首先安装JDK java的SDK简称 ...
SSH开发环境整合搭建
1.建立动态web工程,加入必要的jar包. antlr-2.7.7.jar asm-3.3.jar asm-commons-3.3.jar asm-tree-3.3.jar c3p0-0.9.1.2 ...
《python 与数据挖掘》一1.3　Python开发环境的搭建
本节书摘来自华章出版社<python 与数据挖掘 >一书中的第1章,第1.3节,作者张良均杨海宏何子健杨征,更多章节内容可以访问云栖社区"华章计算机"公众号查看 ...
微信小程序开发系列一：微信小程序的申请和开发环境的搭建
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...
java刚工作搭建环境_Java开发环境的搭建
一.java 开发环境的搭建这里主要说的是在windows 环境下怎么配置环境. 1.首先安装JDK 点击下载好的exe文件安装即可. 2.接下来我们需要配置环境变量 xp系统下右键'我的电脑' ...

Electron开发环境的搭建

文章目录