记录electron新建项目过程

原创已于 2024-05-27 08:35:57 修改 · 752 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端

于 2024-05-23 08:18:24 首次发布

首先电脑内需要安装配置好Nodejs和npm，这个请自行网络学习

electronjs官方文档地址：快速入门 | Electron

初始化项目

mkdir studyClient
cd studyClient
npm init

初始化项目后文件夹内生成package.json文件

安装electron，官方文档也提醒容易出现网络问题，我安装好几次都是因为网络问题，最后我就直接放在不管了，安装了1个小时，如果网络问题可以多试几次，在官方文档中指出ELIFECYCLE、EAI_AGAIN、ECONNRESET 和 ETIMEDOUT 等错误都是此类网络问题的标志。

npm install electron --save-dev

在官方文档中提到一下几点，我们做出更改

在开发模式下启动还需要增加一条命令

{
  "scripts": {
    "start": "electron ."
  }
}

暂时我们先不启动，因为启动会报错

官方文档指出：任何 Electron 应用程序的入口都是 main 文件。这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面。

在您项目的根目录下创建一个名为main.js的空文件。

我们后面会在main.js中引入本地页面，当然也可引入远程url

新建一个index.html页面，添加如下示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

接下来在main.js中添加如下代码

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600
    })
  
    win.loadFile('index.html')
  }
  app.whenReady().then(() => {
    createWindow()
  })

代码详细讲解请阅读官方文档

现在使用下面的命令在我们的项目下启动我们的项目

npm start

现在我们的项目就可以顺利启动了

后续更加详细的内容请参阅官方文档

本文档参考官方文档：快速入门 | Electron