在這里插入圖片描述

Preface

上一篇文：年輕人的第一個音樂播放器

因為網頁打開后老被我誤關，就想著用打包一個桌面應用，

然后因為我啥都不會，只能現學一個最簡單的了，

再次踩在前人的肩膀上選擇了 Electron-forge 這個工具，

一個小時才搞定了最簡單的打包，發布在了Github，

不過我的時間大都花在了看 Electron 的檔案和下載環境上，Electron 還有一些 npm 包因為網路問題半天沒下好；檔案說實話沒咋看明白，不知道是中文翻譯的問題還是我的問題，我照貓畫虎才把選單欄取消掉，

Start

首先得有Node.js，這個前端應該人人都有，

然后換個源，要不然經常下載不成功，

npm config set registry https://registry.npm.taobao.org

安裝：

npm install electron -g
npm install create-electron-app -g

如果實在安裝不成功 Electron 的話（比如我），試試這種方式：

# 先把不成功的卸了
npm uninstall electron
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron

安裝成功后初始化專案（這一步可能非常漫長）：
```
create-electron-app app-name
```
啟動：
```
cd app-name
npm run start
```

啟動成功后會出現了一個應用：

Make & Build

在 src 目錄下，把我們的檔案放到 index.html 中，

然后修改 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);
};

測驗一下 npm run start
直接默認配置打包 npm run make
完成會有一個 out 檔案夾，會有一個安裝包和一個可以直接運行的 exe 檔案：
點開可執行程式，完成：

Summary

當然還有更多打包的細節可以修改，我就不勉強自己了，有需要的可以在油管搜一搜，

還有一些感悟：很多東西就是看起來挺復雜，真正做起來卻很簡單，沖沖沖就完事了！不要老是想做而不去做，很多東西都是大佬們做好而且寫好教程就差喂你嘴里了😂

如果對您有幫助，希望能給個👍評論收藏三連！

歡迎關注互相交流，有問題可以評論留言，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/312152.html

標籤：其他

上一篇：注冊登錄功能的完善

下一篇：排序python元組包含不可比較的元素

年輕人的第一個桌面應用

Preface

Start

Make & Build

Summary