第二讲 Electron项目创建的几种形式介绍
Electron项目创建的几种形式介绍
快速创建Electron项目
该篇文章主要讲解怎么快速创建一个electron项目并将它运行起来，完成我们electron的第一个hello world事例，以后的课程事例我将使用vscode进行代码创建和演示，如果你还没有下载，请先下载最新的安装！为了让大家学习不那么杂乱，本教程的所有安装都是用npm方式进行安装，其它的方式大家可以在熟练以后自行学习！
使用git仓库快速克隆项目并创建
下载项目
我这里主要讲解两个常用的方式，根据个人情况自由选择即可：
- 使用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为我们创建的项目名称
执行成功如下图
3. 进入项目目录并执行运行命令
cd my-new-app
npm start
执行完成效果如下图
到此，你已经get到了两种创建electron的技能，这种一般用的也比较多，歇息一下，喝杯咖啡继续吧！
纯手工搭建一个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
好了，自建应用也完成了，其实就主要的三个文件，下一章我们对目录里面的文件进行一个讲解，我们下一章再见！
浙公网安备 33010602011771号