windows10 Electron-Nuxt.jsでクライアントPCの情報を取得するアプリを作成する

windows10 Electron-Nuxt.jsでクライアントPCの情報を取得するアプリを作成する

Electron-Nuxt.jsでnodeのosを利用して、クライアントPCの情報を表示するアプリケーションを作成するサンプルコード

環境

  • OS  windows10 pro
  • node V10.16.3
  • npm 6.9.0
  • Electron 6.0.12
  • nuxt-buefy 0.3.19

※Electron-Nuxt.jsの環境構築手順はこちら

buefyインストール

デザインにbuefyを利用するのでインストールしておく

プロジェクト配下のnuxt.config.jsにmodulesにnuxt-buefyを追加しておきます。

クライアントPCの情報 するサンプルコード

セキュリティ上よろしくないですが、とりあえず プロジェクト配下のmain.jsの electron.BrowserWindowを下記のように編集します。

win.maximize()もサイズを指定しているのでコメントアウトしておく

次にlayoutsフォルダ配下のdefult.vueを下記のように編集

※src=””の画像は好きなものを設定して下さい

pagesフォルダ配下にpcinfo.vueを下記の内容で作成します。

作成できれば起動してみます。

pcinfoをクリックするとクライアントマシンを取得できていることが確認できます。

buildしてみる

最後にビルドしてexeファイルを作成してみます

buildするとdistフォルダが作成されて、配下にexeファイルが作成されます。