使用快速启动 Demo 创建 Electron 项 目、electronforge 创建项目、手动搭 建 Electron 项目

一、安装 Electron

npm install -g electron / cnpm install -g electron

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

要使用 git 的话首先电脑上面需要安装 git

克隆示例项目的仓库

git clone https://github.com/electron/electron-quick-start

进入这个仓库

cd electron-quick-start

安装依赖并运行

npm install && npm start

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

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

electron 项目。
Github 地址:https://github.com/electron-userland/electron-forge 官网地址:https://www.electronforge.io/

Note: Electron Forge requires Node 10 or above, plus git installed.

1、如果你电脑上面安装了最新版本的 nodejs 可以使用 npx 创建项目，如果你电脑上面

安装了 yarn 也可以使用 yarn 创建项目

npx create-electron-app my-new-app 

或者

yarn create electron-app my-new-app

2、运行项目

cd my-new-app

npm start

3、也可以使用下面方法创建项目(老方法) 

npm install -g @electron-forge/cli

electron-forge init my-new-app

cd my-new-app
npm start 

四、手动搭建一个 electron 项目 

1、 新建一个项目目录 例如:electrondemo01
2、在 electrondemo01 目录下面新建三个文件: index.html、main.js 、package.json 3、index.html 里面用 css 进行布局(以前怎么写现在还是怎么写)
4、在 main.js 中写如下代码: 

const { app, BrowserWindow } = require("electron") const path = require("path")
const createWindow=()=>{

 

const mainWindow = new BrowserWindow({ 

800,

 

height: 600, });

mainWindow.loadFile(path.join(__dirname, 'index.html'));

// mainWindow.loadURL('https://github.com'); } 

/监听 electron ready 事件创建窗口
app.on('ready', createWindow); //监听窗口关闭的事件，关闭的时候退出应用，macOs 需要排除 app.on('window-all-closed', () => {

 

if (process.platform !== 'darwin') { app.quit();

} }); 

//Macos 中点击 dock 中的应用图标的时候重新创建窗口 app.on('activate', () => {

 

if (BrowserWindow.getAllWindows().length === 0) { createWindow();

} });