第二讲 Electron项目创建的几种形式介绍-CFANZ编程社区

Electron项目创建的几种形式介绍

快速创建Electron项目

使用git仓库快速克隆项目并创建

下载项目
使用npm进行项目生成

使用Electron-forge搭建一个项目
纯手工搭建一个Electron项目

快速创建Electron项目

该篇文章主要讲解怎么快速创建一个electron项目并将它运行起来，完成我们electron的第一个hello world事例，以后的课程事例我将使用vscode进行代码创建和演示，如果你还没有下载，请先下载最新的安装！为了让大家学习不那么杂乱，本教程的所有安装都是用npm方式进行安装，其它的方式大家可以在熟练以后自行学习！

使用git仓库快速克隆项目并创建

下载项目

我这里主要讲解两个常用的方式，根据个人情况自由选择即可：

第二讲 Electron项目创建的几种形式介绍_快速开发

使用git获取代码仓库里面的代码

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

去网站上下载解压相关的项目进行测试
这种方式就是适合没有安装git的用户使用，直接浏览器里面打开地址，如下图所示

下载完以后然后解压到指定目录，和第一步操作类似。下面我们进入下面的操作

使用npm进行项目生成

后续设计的命令执行的都是在vscode的终端命令行里面写脚本就好，不知道命令行终端的，看第一步操作。
npm是nodejs自带的一个包管理器，用于下载和维护第三方的项目开发包

cd electron-quick-start

初始化项目，下载项目依赖

npm install

运行项目

npm start

最终展示效果

如果出现如上的画面，那么恭喜你，你已经成功运行了一个第一个Electron应用！给自己点掌声吧。

使用Electron-forge搭建一个项目

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

首先我们是用npm 安装electron-forge脚手架，安装需要等待一段时间

npm install -g @electron-forge/cli

是用脚手架创建项目

electron-forge init my-new-app

my-new-app为我们创建的项目名称

执行成功如下图

第二讲 Electron项目创建的几种形式介绍_html_02

3. 进入项目目录并执行运行命令

cd my-new-app
npm start

执行完成效果如下图

第二讲 Electron项目创建的几种形式介绍_Electon_03

到此，你已经get到了两种创建electron的技能，这种一般用的也比较多，歇息一下，喝杯咖啡继续吧！

第二讲 Electron项目创建的几种形式介绍_git_04

纯手工搭建一个Electron项目

通过这种方式，我们将带你了解electron的底层运行原理有一定的了解，前期你可以安装步骤一步步操作即可，后面熟练了自然就了解了！

我们手动创建一个项目文件夹eledemo1
在eledemo1里面新建三个文件(index.html,package.json,main.js)
文件结构如下：

index.html内容

<!DOCTYPE html>
<html>
    <head>
        <title>我的第一个electron应用</title>
    </head>
    <body>
        <h1>
            Hello,World!
        </h1>
    </body>
</html>

main.js内容

const { app, BrowserWindow } = require("electron")
const path = require("path")
const createWindow=()=>{
const mainWindow = new BrowserWindow({
width: 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();
}
});

package.json

{
    "name": "eledemo1",
    "version": "1.0.0",
    "description": "A minimal Electron application",
    "main": "main.js",
    "scripts": {
      "start": "electron ."
    },
    "devDependencies": {
      "electron": "^13.1.7"
    }
}

运行命令查看效果

npm start

第二讲 Electron项目创建的几种形式介绍_快速开发_05

好了，自建应用也完成了，其实就主要的三个文件，下一章我们对目录里面的文件进行一个讲解，我们下一章再见！

第二讲 Electron项目创建的几种形式介绍_Electon_06