Vue CLI Plugin Electron Builderを使い、Electron+Vue.jsの開発環境を作る。
Vue-CLI 3をインストールする
$ npm install -g @vue/cli
バージョンが3.xになっていることを確認する。
$ vue --version
3.10.0
新しいプロジェクトを作成する
$ vue create hello-world
プリセットを選択するように求められるので、好みの設定でプロジェクトを作る。
GUIでプロジェクトを作成したい場合は、「vue gui」コマンドを使うこともできる。
$ vue gui
Vue-CLI 3で作成したアプリのディレクトリに移動する
$ cd hello-world
Vue CLI Plugin Electron Builderをインストールする
$ vue add electron-builder
途中で、インストールするElectronのバージョンの問い合わせがあるので、最新のバージョンを選ぶ。
? Choose Electron Version (Use arrow keys)
^4.0.0
^5.0.0
❯ ^6.0.0
開発用サーバーを実行する
$ npm run electron:serve
アプリケーションが起動する。
App.vueを編集すると、変更が即座に反映される。
アプリケーションを再起動する必要はない。
アプリケーションをビルドする
$ npm run electron:build