Rails5(5.1ではない)とWebPackerではじめるVue.js

🎯ここでのゴール

Rails5(5.1ではない)でVue.jsをさくっと使えるようにします。

🔀手順

初期設定

gem install rails
rails new experimental-vue
cd experimental-vue

GemfileにWebPackerを追加

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

webpack環境のインストール

rails webpacker:install

vueのインストール

rails webpacker:install:vue

コントローラの生成

rails g controller Index

レイアウトからサンプルのVueアプリを読み込む

views/layouts/application.html.erb に追加

<%= javascript_pack_tag 'hello_vue' %>

webpack watcherの起動

./bin/webpack-watcher

config/routes.rb の変更

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

railsの起動

rails s

表示

open http://localhost:3000/

Vue側のコードの場所

app/javascript/packs

templateの言語をjadeにする

jadeは、pugという名称に変更されているので注意

yarn add pug

webpack-watcher を再起動して反映する。

templateのlangにpugを指定する。

<template lang="pug">
</template>

💚所感

Rails5.1からはWebPackerが標準で入るようになりますし、たぶんこれが一番はやいです。

• Vueify(vue-loader)が便利
• まだWebPackerが標準じゃないのが課題
• これで開発したい