Electron MacOS安装以及运行-nvm方式-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

参考原文：
http://blog.csdn.net/ctbinzi/article/details/23055451
http://npm.taobao.org/
http://electron.atom.io/docs/tutorial/quick-start/
http://www.kancloud.cn/summer/nodejs-install/71975

1 安装nvm

1.1 git clone nvm

#如果不存在，则自行创建
cd /Applications/develop 
##/usr/local/lib/
git clone https://github.com/creationix/nvm.git

1.2 设置nvm参数

nvm 默认是从 http://nodejs.org/dist/ 下载的。国内修改为淘宝的镜像下载,否则慢死。~/.bash_profile 文件添加命令:

export NVM_DIR="/Applications/develop/nvm"
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
install 0.11.11"
source $NVM_DIR/nvm.sh

完成后，执行:source ~/.bash_profile

1.3 检查nvm

重新打开终端, 输入 nvm 检查安装是否成功

2 nvm 安装任意版本的 node

2.1 查看一下当前已经安装的版本

nvm ls
->       v7.4.0
         system
default -> 7.4.0 (-> v7.4.0)
node -> stable (-> v7.4.0) (default)
stable -> 7.4 (-> v7.4.0) (default)
iojs -> N/A (default)
lts/* -> lts/boron (-> N/A)
lts/argon -> v4.7.2 (-> N/A)
lts/boron -> v6.9.4 (-> N/A)

2.2 安装node

nvm install 7.4.0

安装到目录:$NVM_DIR/versions/node/v7.4.0

2.3 安装electron

sudo npm install electron -g \
--registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc

#测试是否安装成功,如果成功，会弹出窗口
electron 
#如果不成功，但安装是成功的，可以手动link或alias过去
alias electron='$NVM_DIR/versions/node/v7.4.0/lib/node_modules/electron/dist/Electron.app/Contents/MacOS/Electron'

安装到目录：$NVM_DIR/versions/node/v7.4.0/lib/node_modules

3 测试程序

3.1 创建项目

cd ~/git
mkdir helloword
cd helloword/

3.2 创建测试代码

分别创建以下几个文件
入口配置文件package.json

{
    "name": "helloword",
    "version": "0.1.0",
    "main": "main.js"
}

入口执行文件main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
let win
function createWindow() {
    win = new BrowserWindow({ width: 800, height: 600 })
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))
    win.webContents.openDevTools()
    win.on('closed', () => {
        win = null
    })
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
app.on('activate', () => {
   if (win === null) {
        createWindow()
    }
})

界面HTMLindex.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>