Vue-CLI 3でElectronの開発環境を作る

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

参考

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください