[javascript]electron-vueを使ってみました。

electronを使って、desktopアプリを作ってみようと思いたちました。
以前angular+electronでtodoアプリを作ったので、今回はelectron-vueを使ってみます。（なんかgithubで人気そうだったので選んでみました）

vue-cli & electron-vue を使ってプロジェクト作成

npmでvue-cliをインストールして、そこからelectron-vueを使ってプロジェクトを作ります。

npm install -g vue-cli
vue init simulatedgreg/electron-vue [project name]

project build

プロジェクト作成後、下記のコマンドで作成中のdesktopアプリが確認できます。

npm run dev

こんな感じで立ち上がります。
立ち上げたままでファイル編集すると、自動で更新して反映してくれます。

エラーが発生

node v12.8.1 を使っていたのですが、下記のようにエラーが発生しました。。

 ERROR in   ReferenceError: process is not defined

    - index.ejs:11 eval
      [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2

    - index.ejs:16 module.exports
      [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:16:3

これを調べてみると、nodeのバージョン関連のエラーだったみたいで、
v10.16.3にnodeのバージョンを下げると、ビルドできます。

node.jsのバージョンはnpmのnをインストールすると切り替えることができます。

フォルダ構成

├ ─ ─  index.ejs
├ ─ ─  main
│    ├ ─ ─  index.dev.js
│    └ ─ ─  index.js
└ ─ ─  renderer
    ├ ─ ─  App.vue
    ├ ─ ─  assets
    │    └ ─ ─  logo.png
    ├ ─ ─  components
    │    ├ ─ ─  LandingPage
    │    │    └ ─ ─  SystemInformation.vue
    │    └ ─ ─  LandingPage.vue
    ├ ─ ─  main.js
    ├ ─ ─  router
    │    └ ─ ─  index.js
    └ ─ ─  store
        ├ ─ ─  index.js
        └ ─ ─  modules
            ├ ─ ─  Counter.js
            └ ─ ─  index.js

フォルダ構成はこんな感じです。
main\index.js に画面の幅や高さを設定できたりします。
たぶん全体的な設定を行うところですね。🤔

rendererの下が表示する画面のソースをおくところです。
router\index.js にルーティングを書きます。（ここのURLにアクセスしたらこの画面を出すみたいな）

ルーティング

export default new Router({
  routes: [
    {
      path: '/',
      name: 'landing-page',
      component: require('@/components/LandingPage').default
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
})

初期はこんな感じで、LandingPageが呼ばれるようになってます。
ほかのところにアクセスされてもredirectでトップがよばれてるみたいですね。

後は、componentsの中に画面を書いていけばよさそうです。