electron 前端框架入门教程

—

由

huihuapp
于

Electron 是一个开源的框架，可以使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。以下是一个 Electron 入门教程，假设你已经安装了 Node.js 和 npm：

安装 Electron

在你的项目文件夹中，首先初始化一个新的 Node.js 项目：

mkdir my-electron-app && cd my-electron-app
npm init -y

然后，使用 npm 安装 Electron：

npm install --save electron

创建一个基本的 Electron 应用

在你的项目文件夹中，创建一个名为 main.js 的文件，这将作为你的主进程文件：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

然后，在同一个文件夹中创建一个 index.html 文件，这将作为你的渲染进程文件：

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, Electron!</h1>
  </body>
</html>

最后，把你的 package.json 文件中的 main 字段改为 main.js，并添加一个 start 脚本来启动 Electron：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^x.y.z"
  }
}

运行你的 Electron 应用

现在，你可以运行你的 Electron 应用了：

npm start

当你运行这个命令，一个新的窗口应该会打开，显示你在 index.html 文件中写的内容。

上述教程是一个非常基础的 Electron 应用的创建过程。实际上，Electron 提供了很多功能，你可以使用它来创建更复杂的桌面应用。具体可以参考 Electron 的官方文档。

建议你配合使用一些前端框架（如 React, Vue 或 Angular）来帮助你构建用户界面，这可以帮助提高开发效率。不过，这需要你已经对相应的前端框架有一定的了解。