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
如上圖,OK 創建好了
5.2 安裝 electron ,使用全局命令
npm install electron -g
如上圖,OK 在系統中安裝了 electron
5.3給當前的項目安裝 electron,使用命令
npm install --save-dev electron
如上圖,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>
5.5 修改 package.json文件中的main值
以上內容如果完整無誤的情況下,Electron的項目已經創建好了,可以使用在當前位置使用Powersell執行Electron .
效果圖