Help us understand the problem. What is going on with this article?

Rails 5.1 + Vue.js で開発を行う - part1 環境構築

More than 1 year has passed since last update.

概要

環境

  • ruby 2.4.1
  • Rails 5.1.1
  • Vue 2.3.4

webpacker のインストール

はじめに webpacker を install します。
※ Rails アプリをすでに作成済みという前提で話を進めます。

webpacker とは

Webpacker makes it easy to use the JavaScript pre-processor and bundler Webpack 2.x.x+ to manage application-like JavaScript in Rails.

Ref. Rails/webpacker | Github

gem 'webpacker' をインストール

Gemfile を以下のように編集して、インストールします

Gemfile
gem 'webpacker', github: 'rails/webpacker'

$ bundle install

備考
Rails アプリを初めて作成する場合は、以下で webpack と Vue.js のインストールが可能です。

$ rails new myapp --webpack=vue

詳細は公式ドキュメントをご確認ください。
Rails/webpacker | Github

yarn のインストール

インストールされている場合は必要ありません。
インストールしていない場合は以下のコマンドを実行してください。

$ brew install yarn

# インストールされているか確認
$ yarn -v
yarn install v0.23.2

備考

brew が入っていない人は以下を参考にしてインストールしてください。
Homebrew macOS 用パッケージマネージャー

webpacker のインストール

以下のコマンドで webpacker をインストールしてください。
webpack 関連のファイルが作成・更新されます。

$ rails webpacker:install

# Webpacker successfully installed 🎉 🍰

Vue.js のインストール

$ rails webpacker:install:vue

vue がインストールされて、app/javascript/packs 配下にファイルが作成されたことが確認できると思います。

Rails アプリ上で Vue.js を利用する

Root ページを作成

$ rails g controller Page home
routes.rb
Rails.application.routes.draw do
  root to: 'page#home'
end

Vue.js を Rails View で読み込む

javascript_pack_tagapp/javascript/packs 配下にあるファイルを読み込むことができます。
Sprockets とは異なり、必要なファイルを必要な View で読み込むことができるので、JS の思わぬ挙動に苦しめられることはあまりないかと思います。

app/views/page/home.html.haml
%h1 Page
= javascript_pack_tag 'hello_vue'

app/javascript/packs/hello_vue.js
import Vue from 'vue'
import App from './app.vue'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('hello'))
  const app = new Vue(App).$mount('hello')

  console.log(app)
})

備考

hello_vue.js には layoutheadjavascript_pack_tag を読み込むように書いているのですが、これだとなぜか動きません。
なので、上では View の最後で読み込むようにしています。

app/javascript/packs/hello_vue.js
// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> and
// <%= stylesheet_pack_tag 'hello_vue' %> to the head of your layout file,
// like app/views/layouts/application.html.erb.
// All it does is render <div>Hello Vue</div> at the bottom of the page.

JS ファイルのコンパイル

JS のファイルをコンパイルすることで hello_vue を開発環境に反映させることができます。
以下のコマンドでコンパイルが完了します。ファイルに変更点があった場合も自動でコンパイルしてくれます。

$ bin/webpack-dev-server

以下のエラーが生じた場合は webpack-dev-server のバージョンを下げましょう。

TypeError: Cannot read property 'compile' of undefined

webpacke が 3 系の場合 webpack-dev-server は 2 系である必要があるので以下を実行しましょう。

$ yarn add webpack-dev-server@2.11.1 --dev

ref. TypeError: Cannot read property 'compile' of undefined - Github

そして http://localhost:3000/ を確認すると以下のような画面になっているかと思います。
スクリーンショット 2017-06-18 17.12.13.png

Rails の View を操作する

今まで見てきたのはあくまで、app.vue を表示しているものにすぎなかった。
ただ、SPA を作るわけでもない限り、一般的には Rails の View を操作することが多いと思われる。
その利用方法をすこし紹介する。

Rails の View つまり html を Vue.js で操作するには、hello_vue.js に記述されているように、以下のように変更しなければならない。

app/javascript/packs/hello_vue.js
- import Vue from 'vue'
- import App from './app.vue'

- document.addEventListener('DOMContentLoaded', () => {
-   document.body.appendChild(document.createElement('hello'))
-   const app = new Vue(App).$mount('hello')

-   console.log(app)
- })

+ import Vue from 'vue/dist/vue.esm'

+ const app = new Vue({
+    el: '#hello',
+    data: {
+      message: "Can you say hello?"
+    }
+ })
app/views/page/home.html.haml
- %h1 Page
+ #hello
+   %h1 Page
+   %p {{ message }}
= javascript_pack_tag 'hello_vue'

以下のように表示されているはず

スクリーンショット 2017-06-18 17.27.21.png

ポイント

html を操作する場合は、vue ではなくて vue/dist/vue.esm を import する必要がある。

- import Vue from 'vue'
+ import Vue from 'vue/dist/vue.esm'

 続き

続きは以下の記事で紹介しています。

Rails 5.1 + Vue.js で開発を行う - part2 Ajax で GET しよう!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away