RailsとVue.jsでアプリケーションを作る時の初期設定

Rails + Vue.jsのプロジェクトを作成する

初めからプロジェクトを作成する場合

$ rails new todo_sample --webpack=vue --database=mysql

–webpackオプションを使用すると、Vue.jsを使ったプロジェクトを作ることができます。また、今回は–databaseオプションを使用して、データベースはmysqlを使うことにします。

途中からVue.jsを導入する場合

Gemファイルに下記を追加して、bundle installします。

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

次に、下のコマンドを実行していきます。

bin/rails webpacker:install

bin/rails webpacker:install:vue

Vue.jsの表示確認

rails g controller home index

上のコマンドでhomeコントローラーを作ります。

home_controller.rb

def index
end

routes.rb

root to: 'home#index'

index.html.erb

<%= javascript_pack_tag 'hello_vue' %>

ファイルを上のように変更して、rails sをして、Hello Vue!と表示されれば設定は大丈夫です。

devサーバーを設定する

Vue.js関連のファイルは変更したらコンパイルする必要があります。
コンパイルには、bin/webpackというコマンドを使用する必要があります。

今回は、変更を検出して自動コンパイルするようにします。

まず、Gemファイルに下のコマンドを追記し、bundle installします。

gem 'foreman'

次に、ファイルを2つ作成して、下のように変更します。

bin/server

#!/bin/bash -i
bundle install
bundle exec foreman start -f Procfile.dev

Procfile.dev

web: bundle exec rails s
# watcher: ./bin/webpack-watcher
webpacker: ./bin/webpack-dev-server

次に、下のコマンドを実行します。

$ chmod 777 bin/server

これでbin/serverを実行してみて、http://localhost:5000で起動して、Hello Vue!と表示されれば設定は大丈夫です。

これで、初期設定は完了のはずです。