Rails×Vue 「Hello Vue!」を表示させるまで

Rails×Vueで「Hello vue!」と表示させるまでのメモです

まずはrails new

% rails new Tasks --webpack=vue 

webpackのオプションにvueを指定してVue.jsを使えるようにします。

githubにリポジトリを作成し herokuにアプリをあげる予定なのでheroku creat後push。

アプリにbootstrapを使いたいので yarnでインストール。

yarn add bootstrap

アプリのルートパスを設定していきます。controller名はhome_controllerとします。

rails g controller Home index

Vueを使用したSPAを作成するのでページを表示するためのアクションはこの中に作成するindex アクションのみとなります。

indexアクションの作成

controllers/home_controller.rb

def index; end  #　ユーザーがアプリに訪問したときの窓口となるだけなので何の処理も入れません

routes.rbの修正

routes.rb

Rails.application.routes.draw do
  root to: 'home#index' # 追加
end

作成したindex.html.erbにVueを読み込ませるための記述をします。

view/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>

hello_vue.js(vueの各コンポーネントはこのファイルを通じてindex.html.erbに表示される)

に先ほどインストールしたbootstrapを読み込ませます

javascript/packs/hello_vue.js

import Vue from 'vue'
import App from '../app.vue'
import 'bootstrap/dist/css/bootstrap.css' // 追加

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

hello_vue.jsに読み込まれ、表示されるapp.vueの確認
vue.jsでは.vueという拡張子のファイルが描画されるテンプレートファイルになります。rails new をした時点でデフォルトで使用されるapp.vueというファイルが用意されています。

javascript/packs/app.vue

<template>
  <div id="app">
    <p>{{ message }}</p> <!-- script内で設定したmessageの中身が描画される -->
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!" // Vue.jsで使用される変数
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

最後にフロントエンド、バックエンド両方のサーバーを起動します。

rails s 

bin/webpack-dev-server

その後localhost3000にアクセスすれば「Hello Vue!」と表示されます。