快速搭建一个electron的桌面项目

BUG弄潮儿

发布于 2023-09-02 16:54:13

2290

发布于 2023-09-02 16:54:13

如果对桌面GUI技术不太了解，又不想花太多时间去研究；想做些跨操作系统的小工具的话，可以研究一下electron技术。只要懂一些基本的Html、CSS与JavaScript就可以做出很不错的跨平台的工具。还可以结合vue、react、TypeScript等技术。网上还有不少这类型的脚手架，例如

https://gitee.com/dromara/electron-egg
https://gitee.com/Zh-Sky/electron-vue-template

1.运行环境：安装node.js和npm, 因为node.js已经集成了npm, 所以只需要装node.js即可，建议安装最新版本。

查看node/npm是否安装成功

node -v
npm -v

2.创建项目并初始化

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

并生成如下package.json文件

{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "my name",
"license": "Apache 2.0"
}

3.安装electron依赖

npm install --save-dev electron

4.在package.json中增加如下scripts命令

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

5.在项目中创建index.html文件，并写入如下代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>你好!</title>
</head>
<body>
<h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
</body>
</html>

6.在项目中创建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()
  })

7. 运行如下命令，即将完成electron项目的搭建；