[Vue.js] Vue CLI 3 で electron-vue の環境を構築する方法

2019.06.05

こんにちは。最近、 Beat Saber というVRゲームに興味がある¹ k-so16 です。

以前登壇した v-kansai meetup では、electron-vue を利用したアプリケーションの作成について発表しました。作成当時はVue CLIのバージョンは2.x系で、 Vue CLI 3 が出る前でした。

久々に electron-vue で何か作ろうかなぁと思い、 Vue CLI 3 がインストールされている私の個人用の開発環境²で electron-vue の環境構築をしようとしたところ、環境構築が出来ませんでした。

そこで、Vue CLI 3 で electron-vue の環境構築をする方法を調べてみました。本記事では、Vue CLI 3で electron-vue の環境を構築する方法を紹介します。

本記事で想定する読者層は以下の通りです。

electron-vue の環境構築手段

最初に、 Vue CLI でプロジェクトを作成します。

プロジェクトの作成

vue create my-project

Vue CLI 3 Plugin for Electron を利用することで、Electron を使えるようになります。

cd my-project
vue add electron-builder

Electron の実行やビルドは npm コマンドから実行出来ます。

npm run electron:serve

npm run electron:build

ビルドで出来上がった生成物は、<rootDir>/dist_electron に出力されます。ここで、 <rootDir> はプロジェクトのルートディレクトリを指します。

Vue CLI 3 Plugin for Electron については、以下の記事を参考にさせていただきました。

Vue Cli 3 plugin for Electronの導入

Vue CLI 3では、 vue init が初期状態で使えません。 vue init を実行すると、以下のようなメッセージが表示されます。

Command vue init requires a global addon to be installed.

Please run npm install -g @vue/cli-init and try again.

vue init をVue CLI 3 で使うために、 @vue/cli-init をインストールします。

npm install @vue/cli-init -g

@vue/cli-init をインストールすると、Vue CLI 2 でプロジェクトを作成する際に利用した vue init と同じように electron-vue の環境構築が出来ます。

vue init simulatedgreg/electron-vue my-project
cd my-project
npm install

本記事のまとめです。

以上、k-so16でした。良い electron-vue ライフを(笑)

Vue CLI 2.x 系を利用している方は、 vue init コマンドがデフォルトで使用出来ます。環境構築のためのコマンドは以下の通りです。

vue init simulatedgreg/electron-vue my-project
cd my-project
npm install

Vue CLI 3 に @vue/cli-init をインストールした後と全く同じ手順ですね。楽勝です（笑）