rails+vue 환경 구축

Vue 가져오기

Gem 가져오기

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

들여오다

$ brew install yarn

$ yarn -v
yarn install 1.15.2

웹 패키지 설치

$ bundle exec rails webpacker:install


Vue의 초기 파일 가져오기

$ bundle exec rails webpacker:install:vue

vue 설정 표시

각 파일 수정

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

class HomesController < ApplicationController
  def index
  end
end

<%= 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