● 1. Vue アプリのインストールと起動の確認

vue create electron-vue-hello
cd cd electron-vue-hello
npm run serve

http://localhost:8080/ にアクセスして起動することを確認します

● 2. electron-builder のインストールと起動の確認

control + c でプロセスをkillして次のコマンドからインストールします

vue add electron-builder

package.json 次のコマンドが追加されたことを確認します

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },

● 3. electronアプリを実行する

npm run electron:serve

● 4. electronアプリをビルドする

npm run electron:build

ここまで来れました準備は全て完了です次はプログラムを記述していきましょう。

● 5. プログラムコードを記述する

npm run electron:build