Electron初体验

1. 下载必要依赖

1.由于Electron依赖国外的源，所以我们需要借助淘宝的源cnmp，不然下载依赖就会有很多坑

// npm下载cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 检查cnpm版本
cnpm -v

2.全局安装electron-builder和electron-package

cnpm install -g electron-builder
cnpm install -g electron-package

3.windows系统，下载https://github.com/electron/electron/releases/download/v8.0.0/electron-v8.0.0-darwin-x64.zip这个包，并放在C:\Users\Administrator\AppData\Local\electron\Cache目录下，解压

2.新建项目

1，新建文件夹Electron_deom，初始化npm，执行npm init.
2, 进入目录终端，下载依赖

cnpm install electron
cnpm install electron-builder

3 根目录下新建main.js配置electron代码，修改package.json

// main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 375,
    height: 667
  })

  // and load the index.html of the app.
  mainWindow.icon = path.join(__dirname,'/dist/favicon.ico')
  mainWindow.loadFile(path.join(__dirname,'/dist/index.html'))

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

// package.json
{
  "name": "electron_demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {  
    "productName":"b2c_njw",
    "directories": { 
      "output": "build"
    } 
  },
  "author": "",
  "license": "ISC"
}

4 将vue或者react打包后的dist包引入.
5 预览，打包命令

npm run start
npm run build