【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管理员

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

本月创作热力图

少
多
最新评论
卢温白
卢温白
10月10日
咨询 AeroCore 主题: 1、能否制作两套独立归档模板,分别分配给两个父栏目,各自下属全部子分类?一套分类网格一行 10 个卡片,另一套分类列表一行仅显
评论于关于本站
卢温白
卢温白
10月10日
咨询 CoreNext 主题: 1、能否制作两套独立归档模板,分别分配给两个父栏目,各自下属全部子分类?一套分类网格一行 10 个卡片,另一套分类列表一行仅显
评论于留言建议
jo
jo
10月9日
为什么后台不能更新主题,提示已经最新版。当前版本1.4.9,我看网站显示版本都到1.5.2了
Tom
Tom
10月8日
AeroCore 的按需加载确实做得好,Vite 构建后的首屏比之前 CoreNext 快不少。不过上面 Mike 说的进度条问题我这边也能稳定复现:从留言页点
评论于留言建议
Shaw
Shaw
10月2日
需要邀请码注册功能,有了马上下单