electron-01 基础及NPM相关配置

沐岚浩2024-05-25 8:33

electron基础

结构

Chromium
Node.js
Native apis

工作流程

启动APP
主进程创建window
Win加载界面
操作

主进程

package.json中main属性对应的文件
一个应用对应一个主进程
只有主进程可以进行GUI的API操作

渲染进程

windows中展示的界面通过渲染进程表现
一个应用可以有多个渲染进程

开始应用

设置NPM配置

打开.npmrc 文件（Windows 用户目录下），写入如下配置即可；

shell 复制代码

registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
sqlite3_binary_host_mirror=https://npmmirror.com/mirrors/sqlite3/
chromedriver_cdnurl=https://npmmirror.com/mirrors/chromedriver/
operadriver_cdnurl=https://npmmirror.com/mirrors/operadriver/
fse_binary_host_mirror=https://npmmirror.com/mirrors/fsevents/

NPM 相关操作

shell 复制代码

# 清除缓存
npm cache verify
# 查看镜像
npm config get registry
# 设置镜像
npm config set registry https://registry.npmmirror.com

快速开始

shell 复制代码

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

使用npm开始

shell 复制代码

npm install electron --save-dev

## npm 下载卡着-- 设置NPM的设置之后使用就不会卡了
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install --save-dev electron

打包应用

shell 复制代码

npm install @electron-forge/cli --save-dev 
npx electron-forge import
npm run make