【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
版权声明:
作者:applek
链接:http://www.lovestu.com/electron02.html
文章版权归作者所有,未经允许请勿转载。
THE END