创建第一个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文件

"main": "main.js",

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

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程序的脚本

  "scripts": {
    "start": "nodemon --exec electron ."
  },

5.启动项目

npm start

此时,效果如图:
electron弹出框

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

相关推荐

  1. 创建第一electron项目

    2024-03-30 13:54:03       35 阅读
  2. 创建你的第一Windows程序

    2024-03-30 13:54:03       7 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-30 13:54:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-30 13:54:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-30 13:54:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-30 13:54:03       20 阅读

热门阅读

  1. 成都某公司笔试题sql

    2024-03-30 13:54:03       19 阅读
  2. 2024年道路运输安全员考试真题题库

    2024-03-30 13:54:03       13 阅读
  3. 怎么在循环List的时候删除List的元素

    2024-03-30 13:54:03       13 阅读
  4. 类模板分文件编写

    2024-03-30 13:54:03       20 阅读
  5. [C++提高编程](三):STL-string容器

    2024-03-30 13:54:03       20 阅读