本文章主要为该视频的学习笔记,如果侵权会速删。
一、入门
1.简介
(1)简介:
Electron是一个使用 HTML、CSS 和JavaScript 构建跨平台桌面应用程序的框架
- 前端技术:Electron 嵌入了 Chromium 和 Node.js,使Web 开发人员能够创建桌面应用程序。
- 跨平台:Electron应用程序与 macOS、Windows 和Linux 兼容,可在所有支持的架构的三个平台上运行。
- 开源:Electron 是一个开源项目,由 OpenJS 基金会和一个活跃的贡献者社区维护。
(2)Electron 功能:
负责处理困难的部分,让桌面开发变得简单,因此可以专注于应用程序的核心
(3)Electron 生态:
- 选择集成您最喜欢的前端生态系统库和框架,或者使用定制的 HTML代码开辟自己的道路
- Electron Packager、Electron Builder、Electron Forge、 Electron Fiddle.
(4)Electron 案例:
- VisualStudio Code、Postman、ApiFox、Hyper
- MongoDB Compass、Another Redis Desktop ManagerMicrosoft Teams、GitHub Desktop、Figma
- QONT、WhatsApp、Skype
- 支付宝小程序IDE、迅雷下载、有道笔记
学习条件:
★掌握: HTML、CSS、JavaScript
☆ 了解: Node.js 基本语法
☆熟悉: 客户端软件基本使用及交互方式
2.开发环境
Node.js
nvm
- 查看本机已装版本列表:nvmlist
- 查看当前可用版本列表:nvmlist available
- 安装指定版本:nvminstall<版本>
- 切换指定版本:nvm use<版本>
- 卸载指定版本:nvm uninstall<版本>
3.上手案例 Hello Electron
(1)Quick Start
克隆仓库:git clone https://github.com/electron/electron-quick-start
进入项目:cd electron-quick-start
安装依赖:npminstall
启动应用:npm run start
(2) Electron Forge
npm 方式
- npm init electron-app <name>
- npx create-electron-app <name>
- npm run start
yarn 方式
- yarn create electron-app <name>
- yarn start
(3)初始项目:
·npm init
·yarn init
- 安装依赖:
·npm install electron --save-dev
·yarn add electron --dev
- 创建页面:index.html
- 程序入口:main.js
- 启动应用:npmrun start
二、 API接口