Electron学习笔记,安装环境(1)

1、支持win7的Electron 的版本是18,这里node.js用的是14版本(node-v14.21.3-x86.msi)云盘有安装包

Electron 18.x (截至2023年仍在维护中):

Chromium: 96

Node.js: 14.17.0

2、安装node环境,node-v14.21.3-x86.msi双击运行选择安装位置,都是下一步

成功后node和npm都已经安装好了

3、新建文件夹,用来放项目文件

运行

php 复制代码
npm init

然后一路回车

4、配置npm使用阿里云镜像

首先,你需要设置npm的registry为阿里云的镜像。你可以通过以下命令来配置:

php 复制代码
npm config set registry https://registry.npmmirror.com

5、安装electron18 版本文件内容

php 复制代码
npm install electron@18.0.0 --save-dev


然后这里面有了一堆文件,就是安装electron成功了,否则就重新运行 install 命令,

6、文件配置

package.json

javascript 复制代码
{
  "name": "eledemo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^18.0.0"
  }
}

main.js

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
// 把顶部自带的默认菜单去掉设置为null
  Menu.setApplicationMenu(null)
  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

7、运行程序

php 复制代码
npm start

demo 程序运行成功

相关推荐
库玛西1 小时前
现代 C++ 智能指针全景指南:从 RAII 思想到工业级实践
c语言·开发语言·c++·笔记·面试
还不秃顶的计科生2 小时前
具身智能论文学习8:Octo: An Open-Source Generalist Robot Policy
人工智能·深度学习·学习·机器学习·语言模型·vla·vlm
woshihuanglaoshi2 小时前
事务加持防超卖:ArkTS 在鸿蒙里玩转 TRANSACTION 出入库
学习·华为·harmonyos
世人万千丶2 小时前
去重插入与超限淘汰:ArkTS 实现鸿蒙搜索历史的 LIMIT 艺术
运维·服务器·学习·华为·harmonyos·鸿蒙
2601_949950633 小时前
在线练题更方便,用练题簿打造属于自己的移动题库
学习·考研·刷题·小程序推荐
woshihuanglaoshi4 小时前
十二商品二十流水:鸿蒙进销存种子数据装满预警看板
学习·华为·harmonyos
MartinYeung55 小时前
[论文学习]ProAct:针对LLM越狱的主动防禦框架
网络·学习·安全
后季暖5 小时前
langgraph笔记(2)&& fastapi笔记
笔记
weixin_431600445 小时前
NestJS 入门(10):日志——为什么常用 Winston?
后端·学习·日志·nest.js·winston
小小筱筱5 小时前
LabVIEW笔记:解决周立功CAN卡驱动缺失导致的启动报错问题
笔记·labview