electron-01 基础及NPM相关配置

electron基础

结构

  • Chromium
  • Node.js
  • Native apis

工作流程

  1. 启动APP
  2. 主进程创建window
  3. Win加载界面
  4. 操作

主进程

  • 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
相关推荐
new出一个对象3 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥3 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒7 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪7 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背7 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M8 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc8 小时前
学习electron
javascript·学习·electron