すぐ始められるVue+Electronテンプレート2023冬

私は広告制作会社で、WebサイトやWebサービスのフロントエンド開発者として働いています。
Webサイト等開発の一方、ネイティブ言語がJavaScriptなのを活かして、画像の大量生成やJSONデータの編集の自動化といった、業務補助のNodeスクリプトを使っています。こういったスクリプトを社内で共有してみんなで使いたいのですが、ターミナルを起ち上げての作業が非エンジニアにはハードルが高いという問題があります。

そこで、過去にはこうしたスクリプトをラップして、GUIで操作できる社内デスクトップツールを、Vue+Electronの当時定番として使われていたelectron-vue、vue-cli-plugin-electron-builder
といった土台を利用して作ってきました。こうした土台を利用して気軽に作るというのは、公開して世に出すものとしては懸念がありますが、クローズドな社内ツールという用途には適していると思います。

そして最近またデスクトップツールを作る機会があったのですが、これらの開発環境が古くサポート外になっていたり調整しないとうまく動かないといった状態になってしまっていたため、新たに同じようなVue+Electronの土台を探しました。その結果、2種のテンプレート「electron-vue-template」「vite-vue3-electron-ts-template」をみつけたので紹介します。
両方とも下記の通り最近のVue3・Electronに対応しています。（※2023.12.01現在）

名前	Vue	Electron	electron-builder	スター数
electron-vue-template	3.2.47	25.2.0	24.2.1	432
vite-vue3-electron-ts-template	3.2.25	25.3.2	24.6.3	86
vue-cli-plugin-electron-builder	2.7.0	13.1.4	23.0.3	4.1k
electron-vue	2.5.16	2.0.4	20.19.2	15.4k

electron-vue-template

• ダウンロード
  git clone [e-mail]:Deluze/electron-vue-template.git
• インストール
  npm install
• 開発プレビュー
  npm run dev
• ビルド
  npm run build:win
npm run build:mac

vite-vue3-electron-ts-template

• ダウンロード
  git clone https://github.com/Yukun-Guo/vite-vue3-electron-ts-template.git
• インストール
  npm i
• 開発プレビュー
  npm run app:dev
• ビルド
  npm run app:build

このテンプレートは下記サイトで知りました。
https://note.com/ego_station/n/n6d71c3c4a0ca

---

両方ともnode v20.10.0で動作確認済み。
nodeのバージョンはpackage.jsonに記述したほうが良いです。

"engines": {
    "node": "20.10.0"
}

enginesに指定します。
もしくはnodeパッケージマネージャVoltaを使っていれば
volta pin node@20.10.0 と記述することで、そのプロジェクトのバージョンが固定され、他のユーザもVoltaを使っていれば自動的に同じバージョンになります。