electron安装

墨蓝 2024-03-22 22:29 130阅读 0赞

## electron安装 ##

## Electron安装 ##

Electron是一种强大的桌面应用开发框架，使用HTML、CSS和JavaScript构建跨平台的应用程序。它基于Node.js和Chromium，可以在Windows、macOS和Linux等操作系统上运行，为开发者提供了一种简单而高效的方式来创建原生桌面应用。

下面是安装Electron的步骤：

### 步骤 1：准备环境 ###

首先，确保你的机器上已经安装了Node.js和npm（Node Package Manager）。如果还没有安装，可以从官方网站（https://nodejs.org/）下载并按照说明进行安装。

### 步骤 2：创建项目文件夹 ###

在合适的目录下创建一个新的项目文件夹，用于存放Electron应用的代码和资源。

### 步骤 3：初始化项目 ###

打开命令行终端，进入到刚刚创建的项目文件夹中，并执行以下命令来初始化一个新的npm项目：

mkdir tomato-study-electron-app && cd tomato-study-electron-app
    npm init

创建一个json文件  
![在这里插入图片描述][55f293f4b348434aaab0ab6d88024c68.png]

这将自动生成一个默认的`package.json`文件，其中包含了项目的配置信息和依赖项管理。

### 步骤 4：安装Electron ###

执行以下命令来安装Electron：

npm install electron --save-dev

如果运行失败，那么先运行下面这条命令。  
`npm install -g cnpm --registry=https://registry.npm.taobao.org`

`cnpm install --save-dev electron`

这将会将Electron作为开发依赖项安装到项目中，并将其添加到`package.json`文件的`devDependencies`中。

![在这里插入图片描述][e376ccbeb3f4470395e8b743b1df2813.png]

### 步骤 5：创建主进程文件 ###

在项目文件夹下创建一个新的JavaScript文件，作为Electron应用的主进程代码。例如，可以创建一个名为`main.js`的文件。

### 步骤 6：编写主进程代码 ###

打开`main.js`文件，并引入`electron`模块，使用其提供的API来创建窗口和处理应用程序的生命周期事件。编写适当的代码来定义应用窗口的大小、行为和渲染内容。

### 步骤 7：修改`package.json` ###

打开`package.json`文件，并添加一个脚本命令用于启动Electron应用。在`scripts`字段中添加如下内容：

"start": "electron ."

![在这里插入图片描述][e5c18d65727e432a8ec1bbd557495cba.png]

![在这里插入图片描述][ff7a8f850fc84b35b1b47fcc67f69f7e.png]  
这将会告诉npm在运行`npm start`命令时启动Electron。

### 步骤 8：运行应用 ###

现在，运行以下命令来启动Electron应用：

npm start

![在这里插入图片描述][0043867d50df4d9dad7eb31f6e452a97.png]

![在这里插入图片描述][74c10815317543659244066ed06e5fb3.png]

![在这里插入图片描述][dc128f47c97048d598deb60727a9ddd7.png]

[55f293f4b348434aaab0ab6d88024c68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/bb546457132e452bbc68b93f62e6b67b.png
[e376ccbeb3f4470395e8b743b1df2813.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/70343b8da28b4040a4428f1865c8decb.png
[e5c18d65727e432a8ec1bbd557495cba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/32c7d07fd155474e95efeece5900ab8c.png
[ff7a8f850fc84b35b1b47fcc67f69f7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/8a8c18aa25574d4a9e8aabcfcc8e700d.png
[0043867d50df4d9dad7eb31f6e452a97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/0f8929691b5646088c6462647050f303.png
[74c10815317543659244066ed06e5fb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d0469b6c001c431ba886a338cee0a8b1.png
[dc128f47c97048d598deb60727a9ddd7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/db30712f4cf048b8a4476da0b8c51836.png