【Electron教程02】环境搭建与第一个程序

一、 安装 electron

电脑安装了nodejs后就可以使用npm了,首先安装electron。

npm install -g electron

二、 克隆一个仓库

使用官方git命令,如果你的电脑有git的话,没有的话使用下面的方法。

克隆官方仓库

git clone https://github.com/electron/electron-quick-start

克隆完成后,使用命令行进入目录

cd electron-quick-start

接下来安装依赖,需要等待一会

npm install

安装慢可以使用cnpm

运行项目

npm start

运行效果可以看到hello world,这个就是一个调试的界面了。

三、 手动创建electron项目

1、新建一个项目目录 例如:electrondemo01
2、在 electrondemo01 目录下面新建三个文件: index.html、main.js 、package.json
3、index.html 里面用 css 进行布局(以前怎么写现在还是怎么写)
4、在 main.js 中写如下代码:

var electron =require('electron');
//electron 对象的引用
const app=electron.app;
//BrowserWindow 类的引用
const BrowserWindow=electron.BrowserWindow;
let mainWindow=null;
//监听应用准备完成的事件
app.on('ready',function(){
//创建窗口
mainWindow=new BrowserWindow({width: 800, height: 600});
mainWindow.loadFile('index.html');
mainWindow.on('closed', function () {
mainWindow = null;
})
})
//监听所有窗口关闭的事件
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
})

5.运行

在本目录使用cmd命令:

electron .

四、 使用electron-forge 搭建一个 electron 项目

electron-forge 相当于 electron 的一个脚手架,可以让我们更方便的创建、运行、打包electron 项目。

1.安装,只需要安装一次,以后不用了

npm install -g electron-forge

2.初始化项目,其中my-new-app为项目名,可以自己起,稍等一会。

electron-forge init my-new-app

如果失败,还是可以使用cnpm,先删除my-new-app目录的node_module目录,如果没有的话就不管,然后运行代码:cnpm install

3.运行项目

切换到这个目录,运行

npm start

 

 

上一篇 【Electron教程01】跨平台桌面应用开发介绍
下一篇 IDEA Maven仓库配置
applek

applek管理员

个人说明在个人中心里面设置

本月创作热力图

2026年3月
最新评论
hfloke
hfloke
3月1日
新版本安装更新后,页面有问题哦
丙氨酸
丙氨酸
2月27日
测试
评论于关于本站
RiseForever
RiseForever
2月23日
听说新主题发布了,来测试下评论区。
李贰捌
李贰捌
12月25日
AI摘要打开了,对接的阿里云,测试成功,但是前台为什么不显示?
javac
javac
12月8日
redis和memcached的完整支持有排期嘛?