文章目錄

• 環境搭建
• • 準備nodejs環境
  • Electron 安裝
• 快速入門
• 附錄
• • node.js和前端js有什么區別
  • Electron是什么？
  • 參考資料

環境搭建

準備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开发环境的搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。