年轻人的第一个桌面应用

因为网页打开后老被我误关，就想着用打包一个桌面应用。

然后因为我啥都不会，只能现学一个最简单的了。

再次踩在前人的肩膀上选择了 Electron-forge 这个工具。

一个小时才搞定了最简单的打包，发布在了Github。

不过我的时间大都花在了看 Electron 的文档和下载环境上，Electron 还有一些 npm 包因为网络问题半天没下好；文档说实话没咋看明白，不知道是中文翻译的问题还是我的问题，我照猫画虎才把菜单栏取消掉。

Start

1. 首先得有Node.js，这个前端应该人人都有。
2. 然后换个源，要不然经常下载不成功。 npm config set registry https://registry.npm.taobao.org
3. 安装： npm install electron -g npm install create-electron-app -g
4. 如果实在安装不成功 Electron 的话（比如我），试试这种方式： # 先把不成功的卸了 npm uninstall electron ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron
5. 安装成功后初始化项目（这一步可能非常漫长）： create-electron-app app-name
6. 启动： cd app-name npm run start

启动成功后会出现了一个应用：

Make & Build

1. 在 src 目录下，把我们的文件放到 index.html 中。
2. 然后修改 index.js： const { app, BrowserWindow, Menu } = require("electron"); const createWindow = () => { const mainWindow = new BrowserWindow({ // 应用图标要放在当前目录下 icon: __dirname '/icon.png', width: 900, height: 700, }); mainWindow.loadFile( path.join(__dirname, "index.html") ); // mainWindow.webContents.openDevTools(); // 去除菜单栏 Menu.setApplicationMenu(null); }; 复制代码
3. 测试一下 npm run start
4. 直接默认配置打包 npm run make

1. 完成会有一个 out 文件夹，会有一个安装包和一个可以直接运行的 exe 文件：

1. 点开可执行程序，完成：

Summary

当然还有更多打包的细节可以修改，我就不勉强自己了，有需要的可以在油管搜一搜。

还有一些感悟：很多东西就是看起来挺复杂，真正做起来却很简单，冲冲冲就完事了！不要老是想做而不去做，很多东西都是大佬们做好而且写好教程就差喂你嘴里了