electron创建项目的三种方法，手动创建

发表于： 2020年5月5日 2020年5月5日
分类：未分类

一、通过git 官网上有方法通过创建项目 electron-quick-start

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

1.全局安装 electron-forge(只需要一次)

npm install -g electron-forge / cnpm install -g electron-forge
2、创建项目 electron-forge init my-new-app

注意：这一步会默认安装模块，如果失败删掉node_modules，重新cd到项目里面运行 cnpm install 或者yarn
3、cd到项目里面
cd my-new-app
4、运行项目
npm start
三、通过electron手动创建项目
1、新建一个文件夹（文件夹不能是中文）

2、新建一个index.html 和一个main.js ,index在vscode html:5做一个基础html就行

3、npm init生成一个package.json 配置项目的元数据

注意的是package.json里面配置的 main 必须是入口js（主进程）

4、electron . 运行项目

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();

}

})

admin

1009