Electron-forge使用实战

1 准备工作

nodejs环境（此处不多说）
代理镜像（由于electron相关下载比较慢，通过使用国内代理提速）

npm set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

2 安装及打包

2.1 全是安装electron-forge

npm install -g electron-forge

2.2 初始化项目（会创建demo文件夹）

electron-forge init demo

{"name": "demo","productName": "demo","version": "1.0.0","description": "My Electron application description","main": "src/index.js","scripts": {"start": "electron-forge start","package": "electron-forge package","make": "electron-forge make","publish": "electron-forge publish","lint": "echo \"No linting configured\""},"keywords": [],"author": {"name": "hank","email": "12630335@qq.com"},"license": "MIT","config": {"forge": {"packagerConfig": {},"makers": [{"name": "@electron-forge/maker-squirrel","config": {"name": "xiaobai_hr"}},{"name": "@electron-forge/maker-zip","platforms": ["darwin"]},{"name": "@electron-forge/maker-deb","config": {}},{"name": "@electron-forge/maker-rpm","config": {}}]}},"dependencies": {"electron-squirrel-startup": "^1.0.0"},"devDependencies": {"@electron-forge/cli": "^6.0.0-beta.61","@electron-forge/maker-deb": "^6.0.0-beta.61","@electron-forge/maker-rpm": "^6.0.0-beta.61","@electron-forge/maker-squirrel": "^6.0.0-beta.61","@electron-forge/maker-zip": "^6.0.0-beta.61","electron": "16.0.5"}
}

其中"config"可以提取到JS文件中

2.3 本地运行package

electron-forge package

或

npm run package

2.3 本地运行start

npm run start

运行效果

2.4 本地运行make

npm run make

3 配置

package.json中注意：

“main”: "src/index.js"

src/index.js

const { app, BrowserWindow } = require('electron');
const path = require('path');// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-requireapp.quit();
}const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,});// and load the index.html of the app.mainWindow.loadFile(path.join(__dirname, '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.on('ready', 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', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {// On OS X 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();}
});// 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 import them here.

4 参考

BrowserWindow 相关设置

BrowserWindow 相关设置(中文)

electron-forge

实例下载

Electron-forge使用实战相关推荐

《Electron入门与实战》创作路上的那些事儿
<Electron入门与实战>创作路上的那些事儿前言我为什么要写这本书系统化的整理和输出自己的知识帮助初学者更好的入门机缘巧合创作历程历程概览写书机会怎么来的? 正式写书前 ...
electron forge
序 electron forge是electron官方推荐的打包.分发工具,怎么说呢,可以参考的资料少之又少,不过话又说回来,其他的打包工具可以参考的内容也并不见得就很多. 在正式切入主题以前,先谈谈 ...
electron forge 好用吗_在优麒麟上使用 Electron 开发桌面应用
使用 Web 标准来创建桌面 GUI,上手快.成本低.跨平台.自适应分辨率,这些都是 Electron 的优势.
Electron 自定义托盘实战——桌面计算器
Electron 默认的托盘(Tray)提供了菜单能力,但是并不能让用户自定义窗口视图,有很大的局限性.我们经常看到 Mac 上很多原生应用,点击托盘之后可以弹出下拉窗口,那 Electron 能不能 ...
2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享
特点拖拽播放桌面歌词 mini模式自定义托盘右键菜单任务栏缩略图,歌曲操作音频可视化自动/手动检查更新 Nedb数据库持久化自定义安装路径,安装界面美化浏览器中启动客户端 Travis ...
使用Electron将html网页转为exe可执行文件(全屏, 遮住任务栏, Esc退出, exe的图标/文件名修改)
成品源码: https://download.csdn.net/download/weixin_42960873/13130175 方法一: 基础源码下载 https://github.com/ele ...
Electron-vue开发实战7——命令行调用与系统级别右键菜单项的实现
原文首发在我的博客,欢迎关注! 前言前段时间,我用electron-vue开发了一款跨平台(目前支持主流三大桌面操作系统)的免费开源的图床上传应用--PicGo,在开发过程中踩了不少的坑,不仅来自应 ...
Electron桌面应用
Electron桌面应用可以使用js,css,html完成pc应用的跨平台开发,内置多种方法访问pc资源 1.创建应用 mkdir my-electron-app && cd my- ...
用Electron创建第一个桌面应用、打包并加密代码
参考教程:https://www.electronjs.org/docs/tutorial/quick-start https://www.cnblogs.com/FHC1994/p/10055698 ...
Electron,打造上班划水摸鱼桌面小工具:“股票监控“软件
最近一个朋友入了股市这个坑,大家都懂的,买了股票你有事没事就想摸出手机看两眼,但是作为一个员工被老板或者领导看到炒股肯定不是什么好事,所以他在公司炒股的时候总感觉不安心,心想如果把数据呈现在电脑桌面某 ...

Electron-forge使用实战

Electron-forge使用实战

目录

1 准备工作

2 安装及打包

2.1 全是安装electron-forge

2.2 初始化项目（会创建demo文件夹）

2.3 本地运行package

2.3 本地运行start

2.4 本地运行make

3 配置

4 参考

Electron-forge使用实战相关推荐

最新文章

热门文章