Electron+HTML做界面,C#做后台(一)创建Electron项目

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

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

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

Electron+HTML做界面,C#做后台(一)创建Electron项目_第1张图片

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

Electron+HTML做界面,C#做后台(一)创建Electron项目_第2张图片

如果打开的和Cmd一样,不要恐惧担忧,不影响以下使用,只需要路径相同即可
Electron+HTML做界面,C#做后台(一)创建Electron项目_第3张图片

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

5.1使用 npm init 设置app信息

npm init

Electron+HTML做界面,C#做后台(一)创建Electron项目_第4张图片
如上图,OK 创建好了

5.2 安装 electron ,使用全局命令

npm install electron -g

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

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

npm install --save-dev electron

Electron+HTML做界面,C#做后台(一)创建Electron项目_第5张图片
如上图,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,并添加以下内容


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

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

Electron+HTML做界面,C#做后台(一)创建Electron项目_第6张图片

以上内容如果完整无误的情况下,Electron的项目已经创建好了,可以使用在当前位置使用Powersell执行Electron .
Electron+HTML做界面,C#做后台(一)创建Electron项目_第7张图片
效果图
Electron+HTML做界面,C#做后台(一)创建Electron项目_第8张图片

当前目录结构

Electron+HTML做界面,C#做后台(一)创建Electron项目_第9张图片
项目源码传送门
Electron+HTML做界面,C#做后台(一)创建Electron项目_第10张图片

你可能感兴趣的:(Electron+HTML做界面,C#做后台(一)创建Electron项目)