Vue.js のサンプルを Electron アプリとして動かしてみる

※ これは 2019/12/20 時点の node.js v13.2.0 vue/cli v4.1.1 の情報です

最新版では動作が異なる可能性がありますのでご注意ください

TypeScript で Electron のアプリは起動できた・・・しかし TypeScript はデータバインディング機構がないので別途フレームワークがほしい

というわけで探したところ Vue.js と React という候補を見つけました

調べた結果、せっかくなのでより Web っぽさを感じる寛容な Vue.js で Electron アプリを試します

・・・React 不採用の理由は厳格な実装なら WPF とか Xamarin とか使ったほうがいいんじゃないかと思ったからです

Vue.js のサンプル

スポンサードリンク

まずは必要環境の構築、例によって管理者モードで VSCode を起動し、ターミナルからコマンドをたたきます

npm install -g @vue/cli

vue-cli のインストール

これで Vue.js のコマンドラインツールがインストールされました！

@ をつけるのは最新の vue/cli をインストールするためだそうです

次にこのコマンドラインツールを使ってサンプルプロジェクト作成、ターミナルでコマンド実行

vue create vsample
cd vsample
vue add electron-builder

途中で出てくる３つの選択肢は全部デフォルトで指定しました

vue プロジェクト作成

最後「使ってない宣言があるぞ！」！って怒られますが、まぁ気にしなくてよさそう

-  Running completion hooks...error: 'installVueDevtools' is defined but never used (no-unused-vars) at src\background.js:6:3:
  4 | import {
  5 |   createProtocol,
> 6 |   installVueDevtools
    |   ^
  7 | } from 'vue-cli-plugin-electron-builder/lib'
  8 | const isDevelopment = process.env.NODE_ENV !== 'production'
  9 |


1 error found.

ここまで終わったら、お試し実行で下記のコマンドをたたきます

npm run electron:serve

vue.js で Electron アプリを起動

ウッゴイタアアアアァァァァァ！！