WebStormでVue3のElectronアプリを作る

# はじめに
デスクトップアプリをElectronで普通に作っていましたが、そろそろフレームワークも使ってみたいなと思い、[Vue3](https://v3.ja.vuejs.org/)を使ってデスクトップアプリを作るための方法です。
IDEはJetBrains社の[WebStorm](https://www.jetbrains.com/ja-jp/webstorm/)を使っています。

また、この記事は、[Vue3.0 + Electronでメモ帳デスクトップアプリを作る](https://www.waguri-soft.com/2020/10/12/vue3-0-electron%E3%81%A7%E3%83%A1%E3%83%A2%E5%B8%B3%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E3%82%8B/)を参考に、
WebStormで作成するための手順です。ありがとうございます。

# 目次
1. プロジェクトの作成
2. Vue3 のセットアップ
3. Vue3 の動作確認
4. Electron-Builderのセットアップ
5. Electron の動作確認
6. アプリケーションにする
6. 参考サイト

# 環境
- Windows 10 Pro 64bit
- WebStorm 2021.1
- Node.js v14.15.1
- @vue/cli 4.5.11
- Vue 3.0.0
- Electron 11.0.0

# 1.プロジェクトの作成
WebStormには、デフォルトでVueのプロジェクトを作成する機能がありますが、現状ではVue3が選択できないので、今回は空のプロジェクトを使って、TerminalからVue3をセットアップしていきたいと思います。
ということで、まずは空のプロジェクトを作ります。
WebStormを起動して、`File`>`New`>`Project...`を選択。
![キャプチャ0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/3ad08659-929d-af07-f6f0-5c61c195699a.png)
空のプロジェクト名を決めて（この例では`vue3-electron`）`Create`をクリックすると、空のプロジェクトが作成されます。

# 2.Vue3 のセットアップ
作成されたプロジェクトの画面下のタブからTerminalを選択します。
![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/bd97225b-9ae4-4d31-e5a9-beed485178a2.png)
以下のコマンドを入力します。

```terminal
> cd ../
```

> １つ上のディレクトリに移動します。

```terminal
> vue create vue3-electron
```

> vueコマンドで先ほど作った空のディレクトリを指定します。

※`vue` コマンドが使えない場合は`@vue/cli`をセットアップする必要があります [^1]
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/1cdc52d2-7719-4807-cf03-654ab7ec3af4.png)
既にディレクトリがあるけどどうする？みたいな事を聞かれるので、上書き（`Overwrite`）を選択してエンターを押します。
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/d36c97c8-18c6-fe90-388e-d7d3ed5d8e58.png)
次に`Please pick a preset`と、セットアップするVueのバージョンを聞かれますので、`Default (Vue3 Preview)`を選択してエンターを押すと、セットアップが始まります。
![キャプチャ4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/c28d2d07-2adb-4ac6-16f5-88fff4c57f5a.png)
セットアップが終わったら、Terminalのどこかに

> Successfully created project vue3-electron.

という記述があると思いますので、これが出てればひとまずセットアップは完了です。
画面左上のプロジェクト内のディレクトリに、ファイルが増えているのが確認できると思います。

# 3.Vue3 の動作確認
![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/1ebbcd71-b3e3-1851-b3f1-5b6b0e06d4c7.png)
`package.json`を開き、`"serve": "vue-cli-service serve",`の行の左にある再生ボタンを押します。
プルダウンが開き、`Run 'serve'`を選択すると、コンパイラが実行され、開発用サーバが起動します。
![キャプチャ5-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/85eb82ff-9f73-52fa-af1e-c4ef1798cf89.png)
画面下の`Run`タブから`http://localhost:8080/`をクリックすると、ブラウザが起動し、Vue3が実行されていることが確認できます。
![キャプチャ6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/f4bc52e8-f1f6-7cc6-dbb0-ed3736c68178.png)
開発サーバを止めるには、画面右上あたりの（<font color=red>■</font>）を押してください。

# 4.Electron-Builderのセットアップ
Vue3の動作確認ができたら、次はElectron-Builderをセットアップします。
![キャプチャ7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/b7794772-d264-11b7-594a-2d60cbab348c.png)

画面下のTerminalタブを選択し、以下のコマンドを入力します。

```terminal
cd vue3-electron
```
> セットアップしたディレクトリに移動します。

```terminal
vue add electron-builder
```

> Electron-Builderを追加します。

![キャプチャ8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/0690c611-9fe2-a155-2d58-9b945e05669c.png)
`still proceed?`と聞かれる事があれば、とりあえず`Yes`と入れて、セットアップを続けます。
![キャプチャ9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/c6eef50b-dd8b-df9a-4ad2-77fbffbcb775.png)
`Choose Electron Version (Use arrow keys)`
と、どのバージョンをセットアップするか聞かれますので、好きなバージョンを選んでください。今回は`11.0.0`を選択しました。エンターを押すとセットアップが始まります。

> Successfully invoked generator for plugin : vue-cli-plugin-electron-builder

と出れば、セットアップ完了です。

# 5.Electron の動作確認
![キャプチャ10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/246e6e5c-980e-5b28-37b2-3d44726341e8.png)
`package.json`に新しく記述が増えていますので、`"electron:serve": "vue-cli-service electron:serve",`の行の左にある再生ボタンを押します。
プルダウンが開き、`Run 'electronserve'`を選択すると、コンパイラが実行され、Electronが実行されます。
![キャプチャ11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/42f0529b-0daf-589a-92fc-d496a0555c74.png)
これで、ElectronでVue3が実行できるようになりました。
Electronを閉じると、実行された開発サーバも停止します。

# 6.アプリケーションにする
![キャプチャ12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/72879f67-0ca9-a7a8-ab4b-0d70edf3dbe3.png)

`package.json`から、`"electron:build": "vue-cli-service electron:build",`の行の左にある再生ボタンを押します。
プルダウンが開き、`Run 'electronbuild'`を選択すると、コンパイラが実行され、Electronアプリケーションとして出力されます。
![キャプチャ13.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/c61b37ba-4767-f563-ff07-58a52239ca21.png)
出力されたファイルは、`dist_electron`ディレクトリに入ります。
デフォルトでは、インストーラ形式のファイルや、そのまま実行できるexeなどが、まとめて出力されます。
こんな感じでセットアップからアプリにするまでの流れが作れたので、
あとは、中身をゴリゴリ作っていくと、デスクトップアプリが色々作れて楽しくなります。

[^1]: [Vue.js を vue-cli を使ってシンプルにはじめてみる](https://qiita.com/567000/items/dde495d6a8ad1c25fa43)