【Electron-1】HELLO WORLD - 东南西北

东南西北

整理 思考 行动

【Electron-1】HELLO WORLD

首页 编程 0 评

安装

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron

通过淘宝源安装electron
创建项目

mkdir app
npm install -y
npm install -S electron

以上命令会自动创建electron所需的文件。

用vs code打开
创建main.js

const {app,BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');

let win;
const createWindow = () =>{
    win= new BrowserWindow({
        width:800,
        height:600
    });
    const URL = url.format({
        pathname:path.join(__dirname,'index.html'),
        protocol:'file:',
        slashes:true
    });
    win.loadURL(URL);
    win.webContents.openDevTools();

    win.on('close',()=>{
        win=null;
    });
}

app.on('ready',createWindow);
app.on('window-all-close',()=>{
    if(process.platform != 'darwin'){
        app.quit();
    }
});
app.on('activate',()=>{
    if(win === null){
        createWindow();
    }
});

创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>APP</title>
</head>
<body>
    <H1>Hello World</H1>
</body>
</html>

执行效果
Snipaste_2018-01-09_22-09-31.png

【Electron-2】集成VUE