PIYO - Tech & Life -

ElectronアプリをVue化する

Electron Vue

jQueryでベタっと書いていたElectronアプリがあるのですが、Electronに多少慣れたこともあってアプリ側のコードをきれいにしたくなりました。Vue.jsを使いたい（正確に言うとVueはまだ触ったことがないので使ってみたい）ので、その下準備としてひとまずVueコンポーネント1個だけの形に持っていきましたので、その過程を残しておこうと思います。

依存ライブラリや設定を追加

まずは関連するパッケージを追加しました。

# vue 本体
$ npm install -S vue

# vue 関連
$ npm install -D vue-loader vue-style-loader vue-template-loader vue-template-compiler

# ついでにcss 関連
$ npm install -D css-loader sass-loader

vue用のloaderを書いたり、警告が出ないように一部追記があります。警告の件は後述します。

diff --git a/webpack.config.js b/webpack.config.js
index 9d3856c..0976ca8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -18,12 +18,15 @@ module.exports = {
   },
   resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    },
     modules: [
       path.resolve(__dirname, "src"),
       "node_modules",
     ],
   },

   module: {
@@ -49,7 +52,12 @@ module.exports = {
       {
         test: /\.node$/,
         use: 'node-loader'
+      },
+      {
+        test: /\.vue$/,
+        use: 'vue-loader'
       }
     ]
   },
 };

Vueコンポーネント化

HTMLとレンダラー用のJSをVueコンポートネントにまとめました。

HTML

まず、元々index.htmlに書いてあった内容をVueコンポーネントのtemplateに移動します。

Before の一部

<body>
  <div class="container">
    <色々>
  </div>
</body>

After

index.htmlの一部

<body>
  <div id="app"></div>
</body>

App.vue

<template>
    <div id="app">
        <div class="container">
        </div>
    </div>
</template>

JS

Before

index.js

$(document).ready(function() {
  $("#button").click(() => {
    // 色々やる
  });
});

After

index.js

import Vue from "vue";
import App from "./App.vue";

new Vue({
  el: "#app",
  components: { App },
  template: "<app></app>"
});

App.vue

<script>
import "色々"
export default {
  name: "App",
  data() {
    return {
      ...
    };
  },
  methods: {
    button: function() {
    }
  }
}
<script>

コンパイラ警告の件

webpack.config.jsの↓のオプションについて。

  resolve: {
    // これ
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
  },

今回はコンパイラが必要な形式↓でコードを書いています。

new Vue({
  el: "#app",
  components: { App },
  template: "<app></app>"
});

すると、このような警告が表示されます。実行時のコンパイラが含まれないよという意味合いの警告ですね。

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

今プロジェクトではwebpackでvue-loaderを使用して事前にコンパイルしていますので本来はコンパイラは不要です。

ランタイム-コンパイラとランタイム限定の違い — Vue.js

vue-loader や vueify を利用する場合、 *.vue ファイルに中のテンプレートはビルド時に JavaScript に事前コンパイルされます。最終成果物の中にコンパイラは本当に必要なく、したがってランタイム限定ビルドを利用することが出来ます。

そこで先ほどの設定を追加することでこの警告を回避できるというわけです。