Electron
Vue.js

Electron+Vue.jsの環境構築

2020.04.20

はじめに

デスクトップアプリケーションを作りたいと思い、色々物色しているとWeb技術（HTML,CSS,JavaScript）で作成できるElectronなるものがあることを知りました。

そしてElectronでは、最近の流行りのJavaScriptフレームワークであるVue.jsも使えるとのこと。

これは、色々と勉強にもなるなと思ったので、これからElectron+Vue.jsを使って色んなアプリを作っていきたいと思います。

本記事のゴール

「よし、サンプルコードを修正してアプリケーションを開発していくぞ。」の前のあまり楽しくないけどめっちゃ重要で、つまると中々抜け出せない環境構築を行い、サンプルアプリケーションを実行するまでがゴールになります。

なお、本記事は10割近くをこの記事を参考にさせていただきました。

環境

  • Windows 10 64bit
  • node v12.16.2
  • npm 6.14.4

利用ツールなど

  • vue-cli
    • コマンドラインインタフェース(CLI)でvue.jsの環境を簡単に作れる開発ツール
  • Vue CLI Plugin Electron Builder
    • vue-cliの拡張プラグイン
    • vue-cliで作ったVueアプリケーションにElectronの構成を追加
    • electron-builderを使用
    • Vue-CLI 3,4のみ対応（2020/04/19時点）

事前準備

Node.jsインストール

Node.jsにアクセスして、自身の環境にあったLTS(推奨版)をダウンロードし、インストールする。

  1. 初期画面で[Next]をクリックする。
  2. End-User License Agreementで同意して[Next]をクリックする。
  3. Destination Folderでデフォルトで[Next]をクリックする。
  4. Custom Setupはデフォルトで[Next]をクリックする。
  5. Toold for Native Modulesはデフォルト（チェックなし）で[Next]をクリックする。
  6. [Install] > [Finish]で完了

参考：
Node.js - Windows10へのインストール方法 (Version 12)

Node.jsインストール確認

コマンドラインからnode -vとnpm -vを入力してバージョンが表示されれば、nodeのインストールは完了になります。

>node -v
v12.16.3
>npm -v
6.14.4

環境構築手順

Vue CLI インストール

コマンドプロンプトで下のコマンドを実行する

# グローバルインストール
>npm install -g @vue/cli

Vue CLI インストール確認

コマンドプロンプトで下のコマンドを実行してバージョンが表示されればOKです。

>vue --version
@vue/cli 4.3.1

この後、使用するVue CLI Plugin Electron BuilderがVue cliのバージョンに対応しているかどうかは気をつけること。

現在、v4は対応しているため、次に進む。

プロジェクト作成

プロジェクト名は初めてなので「hello_vue_electron」という名前で作成する。

下のコマンドを叩くと、デフォルトかマニュアルのどっちで作成するか聞かれたけど、今回は特にこだわりがないのでデフォルトを選択した。

# グローバルインストール
>vue create hello_vue_electron

実行したパスに「hello_vue_electron」フォルダが作成されていればプロジェクトの作成は完了です。

electron-builderのインストール

Vue CLI Plugin Electron Builderを利用してvueアプリケーションが、Electronのデスクトップアプリとして動作するようにします。

Electronのバージョンは、6系を選択した。

>cd hello_vue_electron
>vue add electron-builder
# Choose Electron Version ^6.0.0

サンプルアプリの起動

ここまでの手順でサンプルアプリのひな型がインストールされ、デスクトップアプリケーションとして動作する状態になっている。

下のコマンドで起動すると、アプリケーションが立ち上がり画面が表示される。

>npm run electron:serve

なお、一度この手順でアプリケーションを作成した場合、これ以降は環境構築手順のプロジェクト作成から開始でOKです。
(Vue CLIはグローバルでインストールしているため。)

まとめ

環境構築というとつまりながらやるイメージがあったけど、cliとそのプラグインのおかげで特に詰まるところなく、一気に環境構築までできました。

あくまでここはスタートラインなのでこれから独自のアプリケーションを作成していきたいと思います。

github.com

参考にさせて頂いたサイト