rails + vue 環境構築

Vueの導入

Gem の導入

Gemfile

gem "webpacker", github: "rails/webpacker"

bundle install

yarn の導入

versionが出ればインストール済

$ brew install yarn

$ yarn -v
yarn install 1.15.2

webpacker のインストール

$ bundle exec rails webpacker:install


Rails で webpack を使うために必要な設定ファイルが自動作成される。

Vue の初期ファイルの導入

$ bundle exec rails webpacker:install:vue

Vue を動かすのに必要なファイルが自動的に作成されます。

vueを表示する設定

各ファイルの修正

config/routes.rb

Rails.application.routes.draw do
+  root 'homes#index'
  resources :articles
  resources :users, defaults: { format: :json }
-  get 'homes/index'
end

controllers/homes_controller.rb

class HomesController < ApplicationController
  def index
  end
end

views/homes/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
<h1>Homes#index</h1>

サーバー立ち上げ

二つ必要

# Rails server の立ち上げ
$ bundle exec rails s

# Frontend server の立ち上げ
$ bin/webpack-dev-server

以下のようになっていれば、Vue の導入はひとまず OK！