Electron安装配置

Electron介绍

Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。
目前它已成为开源开发者、初创企业和老牌公司常用的开发工具。

开发环境安装

下载并安装nodejs
https://nodejs.org/en/
下载并安装git
https://git-scm.com/

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Electron,Electron-forge

cnpm install -g electron
cnpm install -g electron-forge

项目开发

package.json

{
  "name": "hello",
  "version": "1.0.0",
  "description": "A application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-packager ./app --platform=win32 --arch=x64 --version=1.6.2 --icon=./images/aa.ico"
  },
  "author": "a",
  "license": "UNLICENSED",
  "devDependencies": {
    "electron": "~1.4.13",
    "electron-packager": "^8.7.2"
  }
}

main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
var mainWindow = null;
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});
app.on('ready', function() {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  //mainWindow.openDevTools();
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using io.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>

打包成exe文件

cnpm install -g electron-packager
electron-packager ./ --overwrite --electron-version=1.4.13

package.json参考

{
  "name": "hosts",
  "version": "2.0.1",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "concurrently \"NODE_ENV=dev electron .\" \"webpack-dev-server --inline --hot --port 8080\"",
    "packageDarwin": "electron-packager . 'Hosts' --platform=darwin --arch=x64 --icon=hosts.icns --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config*|node_modules)\"",
    "packageWin": "electron-packager . 'Hosts' --platform=win32 --arch=x64 --icon=hosts.ico --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"",
    "packageLinux": "electron-packager . 'Hosts' --platform=linux --arch=x64 --out=./dist --asar --app-version=2.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"",
    "prepackage": "rm -rf build && webpack --config webpack.config.prod.js && rm -rf dist",
    "package": "npm run packageDarwin && npm run packageWin && npm run packageLinux"
  },
  "author": "Howard.Zuo",
  "license": "MIT",
  "devDependencies": {
    "autoprefixer": "^6.7.6",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-plugin-component": "^0.9.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "concurrently": "^3.4.0",
    "css-loader": "^0.26.2",
    "electron-packager": "^8.5.2",
    "electron-prebuilt": "^1.4.13",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.28.0",
    "postcss-loader": "^1.3.3",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0",
    "style-loader": "^0.13.2",
    "vue-hot-reload-api": "^2.0.11",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^11.1.3",
    "vue-style-loader": "^2.0.3",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "dependencies": {
    "element-ui": "^1.2.3",
    "hostile": "^1.3.0",
    "sudo-prompt": "^6.2.1",
    "vue": "^2.2.1"
  }
}

标签: 无

发表评论: