windows10 electron-vueをインストールする

windows10 electron-vueをインストールする

electron アプリケーション を開発するにあたり、vue を使用することにしたのでインストール手順を記載
※nodejsがインストールされることが前提

window10にnodejsのインストール手順はこちら

環境

windows10 pro

インストール

nodejsのインストール手順はこちら

下記の画面が起動すれば、問題なし

Hello Worldページを作成してみる

test-project\src\renderer\components内に Hello.vue を作成する

test-project\src\renderer\router の index.js を下記のように編集する

ここで、下記エラーが発生した場合は空白の問題

今回の場合は、空白が6個必要なのに4個しかないと言われているので調整する

※エラーはESlintの構文修正なので、面倒なら下記のコマンドを実行すれば修正できます

後は、test-project\src\renderer\components内のLandingPage.vueの中に下記のタグを追加

リンクが作成される

作成されたリンクをクリックすると、helloページに遷移する

ビルド

ビルドはルートディレクト内で npm run build を実行する

buildファルダが作成され、下図のファイルが作成される