railsにvue.jsを入れる（webpackerとassetpipelineの両立）

webpackerとassetpipeline

railsにはassetpipelineと言ってjavascriptやらcssやらをまとめてくれて通信のやり取りの回数を少なくしてくれる機能があります。しかし、vue.jsはbodyのとじタグ直前でないと動かない場合もあるのでwebpackerを使っていいタイミングで読み込んでもらうようにする。

webpackerのインストール方法

この記事を参考にして下記をインストール

• webpacker
• vue
• yarn
• nmp

webpack導入で下記のファイルが追加される。

• app/
  • javascript/
    • packs/
      • application.js
• config/
  • webpacker.yml
  • webpack/
    • development.js
    • environment.js
    • production.js
    • test.js
• node_modules/
• postcssrc.yml
• babelrc
• yarn.lock
• package.json

ランタイム限定ビルドと完全ビルド

ランタイム限定ビルド・・・コンパイラがなく、Vue インスタンスの作成やレンダリング、仮想 DOM の変更などのためのコードです。
完全ビルド・・・コンパイラ入りでクライアント側でコンパイルする必要があるときに使います。templateを動かす場合は必要。

引用：http://www.aocomme.com/entry/2017/03/08/213000

デフォルトだとランタイム限定ビルドに設定されています。これは完全ビルドより速度が早いため。しかしランタイム限定ビルドはtemplateを動かすことができません。ここで引っかかった。解決策としては上記を各packファイル以下のjsファイルに記入。

import Vue from 'vue/dist/vue.esm';
import App from '../app.vue'

読み込むタイミング

vue.jsはidで指定しているhtmlが描写された後じゃないと効かないのでbodyタグのとじタグ前に読み込む。