Electron+HTML做界面，C#做后台（一）创建Electron项目

最新推荐文章于 2025-05-21 11:33:13 发布

电光石火33

最新推荐文章于 2025-05-21 11:33:13 发布

阅读量599

点赞数

分类专栏：转载文章标签： electron c#

转载专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在Windows 10环境下使用NodeJS和VisualStudio创建Electron应用程序，包括安装NodeJS、VisualStudio，创建项目目录，使用命令行工具初始化项目，安装Electron，以及编写main.js和index.html文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接：https://blog.youkuaiyun.com/qq_28254093/article/details/83831522#commentBox

原作者：东明之羞

1.安装nodejs【自行百度，下载安装包，安装即可】

2.安装visual stuido任一版本就可【推荐使用 vs2012,vs2013,vs2015,vs2017】

3.创建文件目录【当前系统是window10】如下图

在这里插入图片描述

4.在当前的空白区域按住 Shit键+鼠标右键，打开Powershell

在这里插入图片描述

如果打开的和Cmd一样，不要恐惧担忧，不影响以下使用，只需要路径相同即可
在这里插入图片描述

5.使用命令创建Electron程序，一定要检查`nodejs`是否安装合适

5.1使用 npm init 设置app信息

npm init

    
    1

在这里插入图片描述
如上图，OK 创建好了

5.2 安装 electron ，使用全局命令

npm install electron -g

    
    1

在这里插入图片描述
如上图，OK 在系统中安装了 electron

5.3给当前的项目安装 electron，使用命令

npm install --save-dev electron

    
    1

在这里插入图片描述
如上图，OK创建成功，
如果中途下载安装失败，请将 npm 切换成 cnpm 【具体百度】

5.3创建 `main.js`文件并添加以下内容


const electron = require("electron");
const { app, ipcMain, BrowserWindow, session} = electron;

var myWork;
app.on(“ready”, (e) => {
myWork = new BrowserWindow({
center: true,
webPreferences: {
plugins: true,
allowDisplayingInsecureContent: true,
allowRunningInsecureContent: true,
}
});
myWork.loadURL(__dirname + “/index.html”);
myWork.show();
myWork.openDevTools();
});

5.4在当前目录下创建 `index.html`，并添加以下内容

<!doctype html>
<html>
	<head>
		<title>hello Word</title>
	</head>
	<body>
		<h1>这是用Electron创建的程序，这个程序后面将会使用C#来实现数据逻辑处理</h1>
	</body>
</html>

 
 1
2
3
4
5
6
7
8
9

5.5 修改 package.json文件中的main值

在这里插入图片描述

以上内容如果完整无误的情况下，Electron的项目已经创建好了，可以使用在当前位置使用Powersell执行Electron .
在这里插入图片描述
效果图

当前目录结构

在这里插入图片描述
项目源码传送门

        </div>
					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-7f770a53f2.css" rel="stylesheet">
            </div>

Electron+HTML做界面，C#做后台（一）创建Electron项目

1.安装nodejs【自行百度，下载安装包，安装即可】

2.安装visual stuido任一版本就可【推荐使用 vs2012,vs2013,vs2015,vs2017】

3.创建文件目录【当前系统是window10】如下图

4.在当前的空白区域 按住 Shit键+鼠标右键，打开Powershell

5.使用 命令创建Electron程序，一定要检查nodejs是否安装合适

5.1使用 npm init 设置app信息

5.2 安装 electron ，使用全局命令

5.3给当前的项目安装 electron，使用命令

5.3创建 main.js文件并添加以下内容

5.4在当前目录下创建 index.html，并添加以下内容

5.5 修改 package.json文件中的main值

当前目录结构

4.在当前的空白区域按住 Shit键+鼠标右键，打开Powershell

5.使用命令创建Electron程序，一定要检查`nodejs`是否安装合适

5.3创建 `main.js`文件并添加以下内容

5.4在当前目录下创建 `index.html`，并添加以下内容