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'
次に、ファイルを２つ作成して、下のように変更します。
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!と表示されれば設定は大丈夫です。
これで、初期設定は完了のはずです。
