Electron+Vue.jsの環境構築
はじめに
デスクトップアプリケーションを作りたいと思い、色々物色していると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
- 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(推奨版)をダウンロードし、インストールする。
- 初期画面で[Next]をクリックする。
- End-User License Agreementで同意して[Next]をクリックする。
- Destination Folderでデフォルトで[Next]をクリックする。
- Custom Setupはデフォルトで[Next]をクリックする。
- Toold for Native Modulesはデフォルト（チェックなし）で[Next]をクリックする。
- [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とそのプラグインのおかげで特に詰まるところなく、一気に環境構築までできました。
あくまでここはスタートラインなのでこれから独自のアプリケーションを作成していきたいと思います。
