创建第一个Electron程序

前置准备

  • 创建一个文件夹,如: electest
  • 进入文件夹,初始化npm

npm init -y

  • 安装electron依赖包

注,这里使用npm i -D electron会特别卡,哪怕换成淘宝源也不行。可以使用下面方式安装。

首先,安装yarn

npm i -g yarn

随后,指定yarn的源

yarn config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

最后,安装yarn

yarn add -D electron@19.0.0

注意,这里可以不指定版本,直接安装最新的

创建程序

1.在根目录创建main.js文件

2.在package.json中,修改main文件

javascript 复制代码
"main": "main.js",

3.在main.js中,构建第一个简单的electron程序

javascript 复制代码
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 1000,
    height: 800
  })

  win.loadURL('https://www.baidu.com/')
}

app.whenReady().then(createWindow)

4.在package.json中,增加启动electron程序的脚本

javascript 复制代码
  "scripts": {
    "start": "nodemon --exec electron ."
  },

5.启动项目

javascript 复制代码
npm start

此时,效果如图:

因个人需要,后面会学习一些electron相关的知识,如果有时间,也会在博客上同步一些学习到的知识点,希望对大家有所帮助。

感谢阅读!

相关推荐
dr李四维6 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_20 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~27 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ31 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z36 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式