Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@kaluna

WebStormでVue3のElectronアプリを作る

はじめに

デスクトップアプリをElectronで普通に作っていましたが、そろそろフレームワークも使ってみたいなと思い、Vue3を使ってデスクトップアプリを作るための方法です。
IDEはJetBrains社のWebStormを使っています。

また、この記事は、Vue3.0 + Electronでメモ帳デスクトップアプリを作るを参考に、
WebStormで作成するための手順です。ありがとうございます。

目次

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

環境

  • 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
空のプロジェクト名を決めて(この例ではvue3-electronCreateをクリックすると、空のプロジェクトが作成されます。

2.Vue3 のセットアップ

作成されたプロジェクトの画面下のタブからTerminalを選択します。
キャプチャ1.PNG
以下のコマンドを入力します。

> cd ../

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

> vue create vue3-electron

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

vue コマンドが使えない場合は@vue/cliをセットアップする必要があります 1
キャプチャ2.PNG
既にディレクトリがあるけどどうする?みたいな事を聞かれるので、上書き(Overwrite)を選択してエンターを押します。
キャプチャ3.PNG
次にPlease pick a presetと、セットアップするVueのバージョンを聞かれますので、Default (Vue3 Preview)を選択してエンターを押すと、セットアップが始まります。
キャプチャ4.PNG
セットアップが終わったら、Terminalのどこかに

Successfully created project vue3-electron.

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

3.Vue3 の動作確認

キャプチャ5.PNG
package.jsonを開き、"serve": "vue-cli-service serve",の行の左にある再生ボタンを押します。
プルダウンが開き、Run 'serve'を選択すると、コンパイラが実行され、開発用サーバが起動します。
キャプチャ5-1.PNG
画面下のRunタブからhttp://localhost:8080/をクリックすると、ブラウザが起動し、Vue3が実行されていることが確認できます。
キャプチャ6.PNG
開発サーバを止めるには、画面右上あたりの()を押してください。

4.Electron-Builderのセットアップ

Vue3の動作確認ができたら、次はElectron-Builderをセットアップします。
キャプチャ7.PNG

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

cd vue3-electron

セットアップしたディレクトリに移動します。

vue add electron-builder

Electron-Builderを追加します。

キャプチャ8.PNG
still proceed?と聞かれる事があれば、とりあえずYesと入れて、セットアップを続けます。
キャプチャ9.PNG
Choose Electron Version (Use arrow keys)
と、どのバージョンをセットアップするか聞かれますので、好きなバージョンを選んでください。今回は11.0.0を選択しました。エンターを押すとセットアップが始まります。

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

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

5.Electron の動作確認

キャプチャ10.PNG
package.jsonに新しく記述が増えていますので、"electron:serve": "vue-cli-service electron:serve",の行の左にある再生ボタンを押します。
プルダウンが開き、Run 'electronserve'を選択すると、コンパイラが実行され、Electronが実行されます。
キャプチャ11.PNG
これで、ElectronでVue3が実行できるようになりました。
Electronを閉じると、実行された開発サーバも停止します。

6.アプリケーションにする

キャプチャ12.PNG

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

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What is going on with this article?