1、安装node.js
2、安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、安装全局electron
npm install -g electron
4、创建package.json文件
npm init
5、若全局安装,则忽视。局部安装命令
npm install --save-dev electron
6、package.json内容
{ "name": "testapp", "version": "0.0.1", "description": "testapp", "main": "main.js", "dependencies": {}, "devDependencies": { "electron": "^7.1.2", "electron-packager": "^14.1.1" }, "scripts": { "start": "electron .", "packager": "electron-packager . haha --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1" }, "author": "", "license": "ISC" }
7、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.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() } })
8、index.html内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>aaa</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body > <input type="number" value=""> asdfads <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>
9、启动命令①
electron .
10、启动命令②
前提先安装局部依赖
npm install
npm start
11、安装electron-packager打包工具
npm install electron-packager -g
12、配置打包命令
"scripts": { "start": "electron .", "packager": "electron-packager . haha --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1" }
13、启动打包
npm run packager