1、從網上下載的是nodejs的v0.10.42版本的安裝文件，安裝node-v0.10.42-x86.msi都使用默認安裝，安裝完成后會安裝在C:\Program Files\nodejs\目錄下，然后直接把安裝的目錄C:\Program Files\nodejs\拷貝出來，然后再拷貝到另外一個全新的系統上，假如我放到d:\nodejs\這個目錄下，在這個目錄中創建一個run.bat文件作為我們的運行環境。
編輯run.bat文件，輸入內容如下：
@echo off echo ---------- init Node JS environment ---------- & echo. if not EXIST "%APPDATA%\npm" ( md "%APPDATA%\npm" ) if not EXIST "%cd%\node_global" ( md "%cd%\node_global" ) if not EXIST "%cd%\node_cache" ( md "%cd%\node_cache" ) if not EXIST "%cd%\tmp.txt" ( call npm config set prefix "%cd%\node_global") if not EXIST "%cd%\tmp.txt" ( call npm config set cache "%cd%\node_cache") echo.>tmp.txt set path=%cd%\node_global;%cd%;%path% set node_path=%cd%\node_global\node_modules ::這一步應該可以不需要配置 call npm config get prefix & echo. &echo. echo ------------------------------------------------------------ call npm config get cache & echo. echo ============================================================ echo. & echo Node JS system environment is ready & echo. & echo. cmd /k
以上代碼我不多解釋，相信對你來說都是小意思，現在我們可以雙擊run.bat這個文件，則打開一個cmd窗口，在這個窗口中你可以切換到任何目錄下，然后執行node -v 和 npm -v查看當前node和npm的版本號，如下：
因為可能的wall問題，所以建議把npm的倉庫切換到國內taobao倉庫，執行下面的命令：
- npm config set registry "https://registry.npm.taobao.org/"
2. Electron的安裝
因為前面已經啟用了node/npm，所以可以采用npm的方法安裝Electron。
為了測試的方便，我是在命令行窗口中采用下面的命令:
- npm install -g electron
把Electron安裝到系統全局中的。你也可以在你開發項目下采用不加'-g'的命令進行安裝。
3. 編程環境安裝
當前微軟提供了一個強大的免費開發工具VISUAL STUDIO CODE ,直接下載安裝即可，它支持nodejs等的代碼提示，很是方便。
4. 打包輸出工具
為了方便最終成果輸出，建議安裝electron-packager工具，安裝也很簡單，建議以下面的命令全局安裝。
- npm install -g electron-packager
5. 如果需要采用git進行版本控制，建議安裝git工具
直接在git 下載最新版本的安裝即可。
至此實際上開發環境已經搭建好了。下面說一下開發流程。
到空白的項目目錄中，打開命令行窗口（也可以打開git bash）
0. 如果需要git，先做
- git init
1.構建項目package.json文件
- npm init
根據需要輸入內容（下面的內容根據Electron Quick start編寫）。即在package.json中有如下內容：
-
{ "name" : "electron-quick-start", "version" : "1.0.0", "main" : "main.js" }
2.重新寫入依賴
- npm install electron --save
- npm install electron-packager --save-dev
3.在main.js中輸入
- const {app, BrowserWindow} = require('electron')
-
- let win
-
- function createWindow () {
-
- win = new BrowserWindow({width: 800, height: 600})
-
- win.loadURL(`file://${__dirname}/index.html`)
-
- win.webContents.openDevTools()
-
- // 處理窗口關閉
- win.on('closed', () => {
- win = null
- })
- }
-
- // Electron初始化完成
- app.on('ready', createWindow)
-
- // 處理退出
- app.on('window-all-closed', () => {
- if (process.platform !== 'darwin') {
- app.quit()
- }
- })
-
- app.on('activate', () => {
- if (win === null) {
- createWindow()
- }
- })
4. 在index.html中輸入
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Hello World!</title>
- </head>
- <body>
- <h1>Hello World!</h1>
- node 當前使用的node為<script>document.write(process.versions.node)</script>,
- Chrome 為<script>document.write(process.versions.chrome)</script>,
- 和 Electron 為<script>document.write(process.versions.electron)</script>.
- </body>
- </html>
5. 測試執行
- electron .
這將打開一個新的窗口，如圖
也可以統一納入npm管理，即在package.json中添加字段定義
- "scripts": {
- "start":"electron ."
- }
這樣就可以在命令行中用 npm start 來啟動程序。
6. 打包輸出
- electron-packager . --platform=win32
將在項目目錄下建立一個輸出文件夾“electron-quick-start-win32-x64”(注意這里的目錄名稱win32-x64前的部分是package.json中name字段值)，里面就是放置的整個項目的打包，可以復制這個文件夾到任何win32環境中運行（其中electron-quick-start.exe其啟動文件），這個工作也可以納入npm統一管理，在package.json 的“scripts”字段下增加子字段定義即可。如：
- "scripts": {
- "start":"electron .",
- "win32pack":"electron-packager . --platform=win32 --overwrite"
- }
這樣就可以在命令行中用 npm run win32pack 來輸出win32環境下的打包程序("--overwrite"選項用於覆蓋輸出)。