Electron开发交易行为分析系统：一、基础开发环境搭建

开发环境：win10 64位系统

1、安装Node.js

https://nodejs.org/en/  （这里选了10.16.0 LTS），下载安装。

打开cmd，输入 " node -v " 和 " npm -v " 命令，查看安装是否成功。 

2、安装cnpm

在cmd中，输入 " npm install -g cnpm --registry=https://registry.npm.taobao.org " 命令，安装cnpm。

3、安装Electron

在cmd中，输入 " cnpm install -g electron " 命令，安装Electron。

4、新建项目dad

a、创建项目文件夹 "D:\electron\dap\dad"；

b、在项目文件夹下，新建文本文档，重命名“新建文本文档.txt”为“package.json”，用记事本打开，修改相关内容。

{
  "name": "dad",
  "description": "data analysis and display system",
  "author": "amm",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

c、在项目文件夹下，新建文本文档，重命名“新建文本文档.txt”为“main.js”，用记事本打开，修改相关内容。

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

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被垃圾回收的时候，window对象将会自动的关闭
let win;

function createWindow () {
  // 创建浏览器窗口。
  win = new BrowserWindow({
    width: 1000,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  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', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
})

// 在这个文件中，你可以续写应用剩下主进程代码。也可以拆分成几个文件，然后用 require 导入。

d、在项目文件夹下，新建文本文档，重命名“新建文本文档.txt”为“index.html”，用记事本打开，修改相关内容。

  
    
  
  
    
Hello World!
  

5、测试项目dad

在项目文件夹下，按住Shift键并右键单击空白处，选择 “在此处打开Powershell窗口”（win10）来启动命令窗口，输入" npm start " 命令，效果如下：

基础开发环境搭建完毕。