【Rails+vue.js】Hello Vue! を表示させてみた

目的

Rails+webpack(vue.js)を使用して Hello Vue! を表示する。

前提準備

以下の環境構築が既に終了していると仮定して進めています。 gitkado.hatenadiary.jp

コーディング開始

Step1: 大枠とライブラリ準備

# Railsアプリケーション作成
$ rails _5.2.2_ new vue_helloworld --webpack=vue -d mysql
$ cd vue_helloworld
# インストールパスをRailsアプリケーション下で指定
$ bundle install --path vendor/bundle

Step2: DB準備

# config/database.yml 修正
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: 【ここにパスワードを入力】
  host: localhost

# DB作成(development,test)
$ rails db:create
# Railsサーバ起動(Ctrl+Cでサーバ停止)
$ rails s
# localhost:3000 にアクセスしてエラーが出ないことを確認

Step3: helloworld画面作成

# helloworld画面用にController作成
$ rails g controller home index
# rails g コマンドで応答が無い場合の対処方法
$ bin/spring stop

# config/routes.rb 書き換え
Rails.application.routes.draw do
  root to: 'home#index'
end

# app/views/home/index.html.erb 書き換え
# javascript_pack_tagを使用することで、app/javascript/packs以下にあるJSファイルを探します。
# インストール時にhello_vue.jsが生成されているので、これをindexで読み込ませます。
<%= javascript_pack_tag 'hello_vue' %>

# localhost:3000にアクセスして「Hello Vue!」が表示されることを確認
$ rails s

まとめ

最低限の枠組みが作れることは確認できたので、
実際にvue.jsを使った開発を進めて行こうと思います。

参考

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた
Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～