Electron-02：Electron 安装、使用快速启动 demo 搭建 Electron 项目、单独搭建 Electron 项目 、electron-forge 搭建项目

一、 安装 electron

npm install -g electron

二、 克隆一个仓库、快速启动一个项目

# 克隆示例项目的仓库
 
git clone https://github.com/electron/electron-quick-start
 
# 进入这个仓库 

cd electron-quick-start
 
# 安装依赖并运行 

npm install && npm start

三、 手动搭建一个 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 、运行

electron . 

注意：命令后面有个点

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

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

electron 项目。

npm install -g electron-forge 

electron-forge init my-new-app 

cd my-new-app 

npm start