Macにrbenvを入れてからRails + Vue.jsをインストールする

JavaScript Rails

rbenvでRubyのバージョン管理

$ brew update
$ brew install rbenv ruby-build
$ rbenv --version
  rbenv 1.1.1
$ rbenv install --list
$ rbenv install 2.4.1
$ rbenv global 2.4.1
$ rbenv rehash
$ ruby -v
  ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-darwin15]

Railsを導入する

$ gem install bundler
$ mkdir new_app
$ cd new_app
$ bundle init

# gem 'rails'のコメントアウトをはずす
$ vi Gemfile 

# オプション指定でディレクトリ配下のvendor/bundleにインストール
$ bundle install --path vendor/bundle --jobs=4

# オプションを確認
$ bundle exec rails new -h 

# カレントディレクトリに作成。GemfileはOverwriteするか聞かれるのでY。
$ bundle exec rails new ./ -B -d mysql --skip-turbolinks --skip-test-unit --webpack=vue

サーバーを起動して、http://localhost:3000で確認。

$bundle exec rails s

Vueを入れる

Rails 5.1からはwebpackをサポートするようになったそうで、Vueを簡単に導入できます。

# Gemfileに`gem 'webpacker'`を追加
$ vi Gemfile
$ bundle install

# webpackとvueのインストール
$ bundle exec rails webpacker:install
$ bundle exec rails webpacker:install:vue

webpackまたはwebpack-dev-serverを使うことで、webpackを起動することができます。 webpack-dev-serverの場合は、以下のようなことをしてくれるそうですが、今回は試していません。

  • ファイルの変更を検知して、自動リビルド＆ブラウザの自動リロード
  • ローカルサーバーを起動
# 以下のようなエラーがでる
$ bin/webpack
 Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
 Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.


# エラーのコメント通りに実行
$ bundle binstubs bundler --force

# 再実行
$ bin/webpack

これで最低限恩開発環境のセットは終了です。

参考： - Rails 5.1 + Vue.js で開発を行う - part1 環境構築 - Qiita - 【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～ - Qiita - rails newの先輩オススメ手順 - まえとうしろ