Vue を使って Electron アプリを開発する

JavaScript Electron

kondoumh.hatenablog.com

Vue のことがちょっと分かった気になれました。すると、最近よく触っている Electron でのアプリ開発にも取り込みたくなります。

github.com

Scrapbox in Electron は WebView でサイトの画面を表示していますが、Electron では当然自前で画面を作ることもできます。その場合は Vue のようなフレームワークを適用するのが自然でしょう。

  • Web とアセットを共有したい
  • フレームワークのツールチェインや知識を流用したい

という意図があります。

electron-vue という Vue と Electron を使ったプロジェクトのボイラープレートがあります。

github.com

vue-cli が導入されていれば、以下のコマンドを叩いて、プロジェクト名などを入力するだけ。

$ vue init simulatedgreg/electron-vue my-project

Electron のインストールもお任せできます。

生成されたプロジェクトディレクトリに移動して

$ npm run dev

で、デフォルトの Electron アプリが起動します。

Vue 用のフォルダは src/renderer/components 配下になりますので、ここに Web アプリ用の Vue ファイルなどを配置します。

動きました。

Electron アプリとして作りこむためには、Renderer と Vue コンポーネント間の連携が必要ですが、そこをどう作りこむのか、Web とアセットの共有がどこまで可能かについてはやってみないと分からないところです。

2019/2/27 追記

Main Process のメニューから Renderer Process 経由で、ダイアグラムにノードを追加するコードはこんな感じになりました。

src/main/index.js

function createMenu () {
  console.log('createMenu')
  const template = [
    {
      label: 'Edit',
      submenu: [
        {
          label: 'add',
          click () {
            mainWindow.webContents.send('add', 'hoge')
          }
        }
      ]
    }
  ]

  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

src/renderer/components/JointDia.vue

<script>
  import joint from 'jointjs'

  export default {
    name: 'JointDia',
    mounted () {
      this.graph = new joint.dia.Graph()
         :
      this.$electron.ipcRenderer.on('add', (e, data) => {
        this.addNode(data)
      })
    },
</script>

this.$electron.ipcRenderer で IPC イベントを処理できます。

この例では、イベントを受けたいコンポーネントの mounted に直接ハンドラーを書きましたが、App.vue からディスパッチするようにすれば、サブコンポーネントは Web と同一にできそうな気がしました。