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

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

本月创作热力图

最新评论
小超
小超
7月9日
下个版本考虑将下载地址加密(防止采集)
Lvtu
Lvtu
7月4日
qiang厉害
评论于留言建议
chinacnd
chinacnd
6月26日
这个主题是怎么做到加载速度那么快的?
风起云涌
风起云涌
6月17日
前台投稿现在有点太抽象了 希望可以弄成那种分区填写的 标题,内容,图片,目录,标签,这样的
评论于留言建议