各バージョン

  • OS : macOS High Sierra 10.13.5
  • Ruby : 2.5.0
  • Rails : 5.1.6
  • Yarn : 1.6.0
  • Vue.js : 2.5.16
  • Bootstrap : 4.1.1
  • Font Awesome : 5.0.9

構築手順

1. Rails + Vue プロジェクトの作成

$ rails new your-project-name --webpack=vue

備考
rake taskで以下のエラーメッセージが出た場合、以下の手順で解決。

  1. yarn install
  2. config/environments/development.rbにconfig.webpacker.check_yarn_integrity = false追加
Error:[rake --tasks] ========================================
Your Yarn packages are out of date!
Please run `yarn install` to update.
========================================
To disable this check, please add `config.webpacker.check_yarn_integrity = false`
to your Rails development config file (config/environments/development.rb).
env: node: No such file or directory

2. Bootstrap + Fontawesome の追加

2-1. Gemfile

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
gem 'font-awesome-sass', '~> 5.0.9'

2-2. CSS

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

// Bootstrap & Font Awesome
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

2-3. JaveScript

// Bootstrap
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap
//= require turbolinks
//= require_tree .

3. JSコード変更の自動反映設定

3-1. Gemfile

gem 'foreman'

3-2. 設定ファイル作成

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

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

$ chmod 777 bin/server