Electron在Windows下的环境搭建

Electron作为一种用javascript写桌面程序的开发方式,现在已经被大众接受。下面就介绍如何在windows(>win7)下快速搭建Electron开发环境。

1. nodejs 的安装

从nodejs 下载最新版本的windows安装程序进行安装,我下载的是v6.9.1,安装时一路默认即可,这个安装会把nodejs和npm配置到系统PATH中,这样在命令行的任何位置都可以直接用node执行nodejs,用npm执行npm命令。

检查nodejs是否安装成功可以这样查看:

 

安装完成后node不是内部或外部命令解决方案:

 

另外,因为可能的GFW问题(不然会下载很慢很慢,也可能下载失败),所以建议把npm的仓库切换到国内taobao仓库,执行下面的命令:

npm config set registry "https://registry.npm.taobao.org/"

还有一种方式,注册cnpm命令࿰

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是详细步骤: 1. 下载并安装 Node.js 官网下载地址:https://nodejs.org/en/download/ Node.js 是一款基于 Chrome V8 引擎的 JavaScript 运行环境,我们需要先安装它。 2. 安装 electron 在命令行中输入以下命令: ``` npm install -g electron ``` 这个命令会将 electron 安装到全局环境中。 3. 创建一个新的 electron 应用 在命令行中输入以下命令: ``` mkdir my-electron-app && cd my-electron-app npm init -y ``` 这个命令将创建一个新的文件夹 my-electron-app,并且在该文件夹下初始化一个新的 Node.js 应用。 4. 修改 package.json 文件 在 my-electron-app 目录下找到 package.json 文件,将其修改为以下内容: ```json { "name": "my-electron-app", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "start": "electron ." }, "author": "", "license": "ISC", "dependencies": { "electron": "^12.0.0" } } ``` 其中,main 指定了应用的主入口文件为 main.js,scripts 中的 start 命令会自动启动 electron,并且将当前目录作为应用根目录。 5. 创建主入口文件 main.js 在 my-electron-app 目录下创建一个新的文件 main.js,将以下代码复制到该文件中: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 win.loadFile('index.html') // 打开开发者工具 win.webContents.openDevTools() } // 应用程序准备就绪时调用createWindow函数 app.whenReady().then(() => { createWindow() app.on('activate', function () { // 在macOS上,当单击dock图标并且没有其他窗口打开时,通常在应用程序中重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 当所有窗口都关闭时退出 app.on('window-all-closed', function () { // 在macOS上,应用程序及其菜单栏是常见的保持活动状态的应用程序。 if (process.platform !== 'darwin') app.quit() }) ``` 6. 创建 index.html 文件 在 my-electron-app 目录下创建一个新的文件 index.html,将以下代码复制到该文件中: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 7. 启动应用程序 在命令行中输入以下命令: ``` npm start ``` 这个命令会启动应用程序,并且打开一个 Electron 窗口,窗口中会显示 Hello World!。 至此,你已经成功地创建了一个简单的 Electron 应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值