Electron - 搭建Electron项目

最新推荐文章于 2024-07-09 15:11:40 发布

philipzone

最新推荐文章于 2024-07-09 15:11:40 发布

阅读量311

点赞数

分类专栏： # ElectronJs

本文链接：https://blog.csdn.net/philipzone/article/details/107042294

版权

ElectronJs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Electron是什么

使用HTML、CSS和Javascript 构建跨平台的桌面应用程序。

环境要求

Windows运行环境需要win7及以上，因为Electron是基于Chrome V8 ，它不支持xp
nodejs 和 npm，这两个使用稳定版，越新越好
代码编辑器，推荐使用vscode

搭建Electron项目

创建项目的根目录文件夹
在根目录下运行 npm init 命令
修改package.json文件

//修改的内容主要有两个，main节点值改成main.js(程序入口，不一定是这个名字，默认使用它),scripts节点增加start
{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

安装electron
建议配置npm的淘宝镜像和electron镜像，否则安装速度会很慢，甚至安装不上。

npm config set registry https://registry.npm.taobao.org
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

# 在根目录下运行
npm install --save-dev electron

创建main.js，编写代码运行（npm start 运行）
简单示例：

//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);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Electron</title>
</head>
<body>
    <h1>Welcome to the Electron's world!!!</h1>
</body>
</html>

philipzone

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Electron - 搭建Electron项目

Electron是什么使用HTML、CSS和Javascript 构建跨平台的桌面应用程序。环境要求Windows运行环境需要win7及以上，因为Electron是基于Chromium V8 ，它不支持xpnodejs 和 npm，这两个使用稳定版，越新越好代码编辑器，推荐使用vscode...
复制链接

扫一扫

专栏目录