今まで Vue.js + Electron の組み合わせでプロジェクトを作成するには electron-vue が定番でした。
しかし、Vue CLI がバージョン3になり、Webpack 周りの設定を意識することなく TypeScript などが手軽に導入できることに慣れてしまうと、Vue CLI 2 ベースの electron-vue で新規プロジェクトを作るのは若干面倒に思えてしまいます。
検索してみたところ、Vue CLI 3 のプラグインである vue-cli-plugin-electron-builder というのが見つかり、大変便利だったのでご紹介させていただきます。
公式サイト https://nklayman.github.io/vue-cli-plugin-electron-builder/
導入方法
Vue CLI 3 がインストールしてあり、すでにプロジェクト作成済みの状態で、
vue add electron-builder
と入力すると、 Electron や依存パッケージがインストールされるほか、いろいろと設定やファイルを追加してくれます。
※ vue ui のプラグイン画面からでも追加できます
追加されるもの
.gitignore
アプリケーションビルド先のディレクトリ /dist_electron が .gitignore に追加されます。
package.json
プロジェクトルートの package.json に npm スクリプトがいくつか追加されます。
重要なのは以下の2つです。
electron:build
ビルドコマンド。/dist_electron ディレクトリに Electron アプリケーションやインストーラが書き出されます。
electron:serve
Dev サーバ起動。Electron ウィンドウが立ち上がり、ホットリロードしながら開発できます。
src/background.js
Electron 起動スクリプトのファイルが新たに作成されます。
メインウィンドウの作成や、すべてのウィンドウが閉じられた時にアプリケーション終了（Mac OS除く）などのテンプレ的な内容に加え、開発時は起動後に DevTools を開く、といった処理が書かれています。
ちなみに Vue CLI で TypeScript を選択したプロジェクトの場合、拡張子がちゃんと .ts になっていて感心しました。
electron-vue との違い
一番の違いはディレクトリ構成でしょうか。
electron-vue は /app/src の下がメインプロセス用とレンダラプロセス用のディレクトリに分かれていますが、 vue-cli-plugin-electron-builder は Vue CLI のディレクトリ構成のままなので、/src に両方のファイルが置かれることになります。
また、electron-vue は 設定ファイルが細かく分かれていますが、vue-cli-plugin-electron-builder は Vue CLI の設定ファイル vue.config.js を使用します。
electron-vue も vue-cli-plugin-electron-builder もしっかり使い込んでいるわけではないので、他にも違いがあったらお知らせください。
まとめ
公式サイトのガイドページには、インストール方法から使い方、各種設定、アイコン作成方法などのTipsやFAQ的なページなどがあり、しっかり作りこまれていて安心感があります。
既存プロジェクトにも簡単に Electron を導入できるのも大きな強みですね。
Vue.js + Electron の新たな定番になりそうなポテンシャルを秘めているのではないでしょうか。