Electron + Vue.js3 でMacアプリを作る最初の手順覚書

初期設定

$ vue create アプリ名 // Vue初期設定
$ cd アプリ名

ライブラリ追加

$ vue add electron-builder // electronのビルドプラグイン
$ npm install bulma // CSS Bulma
$ npm install -D electron-icon-builder // アイコン設定用ライブラリ追加
or
$ yarn add --dev electron-icon-builder // アイコン設定用ライブラリ追加

開発

$ npm run electron:serve // electronの開発画面で起動

設定

background.js

const win = new BrowserWindow({
useContentSize: true,

CSS設定

main.js

import '../node_modules/bulma/css/bulma.min.css'

アイコン

package.json

"script": {
    "electron:generate-icons": "electron-icon-builder --input=./public/app_icon.png --output=build --flatten" // ビルド用に追加

background.js

  const win = new BrowserWindow({
   icon: path.join(__static, 'app_icon.png') // 追加

ビルド

$ yarn electron:generate-icons // アイコンを作成
$ yarn electron:build // 配布用ビルド

参考書籍

改訂版 実践で学ぶ！Electron+Vue.jsでデスクトップアプリ開発
https://booth.pm/ja/items/2396714