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