A.インストール
1.のNode.jsをインストールします。
公式サイトからダウンロードしたのNode.jsは
、ダウンロードLTSバージョン（現在は10.16.3）、デフォルトのインストールを推奨します。
2.糸をインストール
命令を実行し、管理者モードにcmdを起動します。
NPM糸をインストール-g
公式サイトによると、Yarn 对你的代码来说是一个包管理器， 你可以通过它使用全世界开发者的代码， 或者分享自己的代码。Yarn 做这些快捷、安全、可靠，所以你不用担心什么。
ここではデフォルトのパッケージマネージャのNPMの代わりに糸を使用します
この時点から、任意のステップ命令が実行された後、我々は慎重に印刷するには、ログのcmdウィンドウを確認する必要があります注意してください。
そのようなあなたはxxxの追加やNPM XXXをインストールし、次のログを印刷し糸を実行した後など、いくつかの重要なヒントがあるでしょうログイン
added 253 packages from 162 contributors and audited 1117 packages in 42.157s
found 5 vulnerabilities (1 low, 4 high)
run `npm audit fix` to fix them, or `npm audit` for details htmlこれを実行するユーザーを必要とnpm audit fixするための手順检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖，而不必再自己进行跟踪和修复。
次のチュートリアルを、読者は慎重に、ログのすべてのステップ、タイムリーな修理を観察する必要がある、それはもはや繰り返し思い出されません。
3.ビルド環境をインストールします。
命令の実行にCMD：
NPM -g窓-ビルドツールをインストール
このステップでは、その上のpython2.7のMSBuildのをインストールします。
4.環境変数の設定
命令の実行にCMD：
NPM設定セットのpython python2.7の
NPMコンフィグ設定msvs_version 2017
最初の文のコマンドは、電子がpython3.xをサポートしていない、（既に前のステップでインストールされます）ビルド環境として使用python2.7を指定します。
環境変数を指定した後、ユーザーがアンロード他のpythonには、このユニットは必要ありません。
5.プロジェクトディレクトリを作成します。
すべての中国人は使用しないでください。あなたのプロジェクトのルートディレクトリとディレクトリパスとして新しいフォルダを作成するだけでなく、スペースは表示されないようにしてみてください。
CMDウィンドウで、プロジェクトのルートディレクトリにカレントディレクトリを変更するcdコマンドを使用します。
6.プロジェクトを作成します。
実行コマンド：
NPMのinit -y
このステップでは、我々は、ここで私たちは一人でこのファイルを残してプロジェクトを初期化すると、自動的にpackage.jsonファイルを確立するために、プロジェクトのルートディレクトリにNPM使用し、後でもう一度それを設定。
7.電子をインストール
実行コマンド：
糸は、最新の--save-devの@電子を追加します
この命令は、電子の最新バージョンをインストールし、あなたのプロジェクトになります。
あなたは電子の他のバージョンをインストールしたい場合は、そのよう[email protected]または電子@ベータとして、対応するバージョン番号に、最新の修正を入れて
8.変更package.json
推奨vscode編集
package.jsonを開いた後、以下を参照してください。
私はpackage.jsonで一部のコンテンツを追加しました：
"メイン"： "main.js"
プロジェクトの入り口の開始を指定します。
「スタート」：「電子を。」
起動スクリプトを指定して、あなたは、このスクリプトを使用してアプリケーションを起動することができます。
我々はまた、ことを確認することができます"devDependencies"があり"electron": ^6.0.10
ますが、糸がインストールされたモジュールを追加使用する場合は、自動的にそこに更新されます。ここでは、モジュール、ならびに対応するバージョンをインストールする十分。
9. main.jsを追加します。
前のステップでは、入学package.jsに始まったプロジェクトを指定します。main.js.を
のは、このファイルを作成し、コンテンツを追加してみましょう：
プロジェクトのルートディレクトリには、main.jsファイルを作成します。
次の行を追加します。
//////////////////////////////////////////////////////////////////////////////////////
const { app, BrowserWindow } = require('electron')
// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win
function createWindow () {
// 创建浏览器窗口。
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
// 打开开发者工具
win.webContents.openDevTools()
// 当 window 被关闭，这个事件会被触发。
win.on('closed', () => {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
win = null
})
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (win === null) {
createWindow()
}
})
// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。
//////////////////////////////////////////////////////////////////
10.追加のindex.html
前のステップでMain.jsは、我々はhtmlファイルがロードされた指定、htmlファイルは、プログラムのメインページです。
プロジェクトのルートディレクトリには、index.htmlファイルを作成します。
次の行を追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
11.スタート！
いくつかの前に、我々は3つの必須文書（すなわちpackage.json、main.jsとのindex.html）を追加し、プロジェクト、初期化、電子インストールを完了させるために作成しました。
今、我々は最終的に我々のプログラムの電子を開始することができます！
プロジェクトのルートディレクトリのための作業用ディレクトリを確認し、コマンドを実行します。
標高開始
プログラムが開始されました！
レンダリング後に表示される左インターフェイス上で、デスクトップ上の別のプログラムを立ち上げindex.htmlにあり、インターフェイスの右側には、実際に開発者向けオプションクロム/クロムブラウザ（F12）です。
オプションは、デバッグする開発者を必要としない場合、その後、単純にmain.js win.webContents.openDevTools()再びを通じて、彼らの前npm start我々のプログラムの開始。
さて、あなたは、index.htmlをを修正プログラムのメインインターフェイスにいくつかの新しい要素を追加することができます。