# ユーザーのカレントに移動
$ cd

# アプリケーションフォルダ作成
$ mkdir vue_app
$ cd vue_app

# アプリケーション作成
$ rails new . --webpack=vue --skip-bundle --skip-test --skip-turbolinks --skip-coffee

# rbenvでruby のバージョンを「2.4.1」に指定
$ rbenv local 2.4.1

# bundler でgemをインストール
$ bundle install --path vendor/bundle

# railsアプリを起動
$ bundle exec rails s -b 0.0.0.0
# http://{app_url}:3000/rails/info/routes でルーティングを確認できる

############################
# githubで管理する
############################

# git設定ファイル作成
$ git init

# ignoreファイルの編集
$ vi .gitignore

# See https://help.github.com/articles/ignoring-files for more about ignoring files.
#
# If you find yourself ignoring temporary files generated by your text editor
# or operating system, you probably want to add a global ignore instead:
# git config --global core.excludesfile '~/.gitignore_global'

# Ignore bundler config.
/.bundle
/.ruby-version
/vendor/bundle

# Ignore the default SQLite database.
/db/*.sqlite3
/db/*.sqlite3-journal

# Ignore all logfiles and tempfiles.
/log/*.log
/tmp/*
!/log/.keep
!/tmp/.keep

/node_modules
/yarn-error.log

.byebug_history

# ステージング
$ git add .

# コミット
$ git commit -m "initialize repository"

# githubの設定情報をローカルのgitに設定
# (gitのアドレスにユーザー名を埋め込んだ「vbarista」)
$ git remote add origin {ユーザー名を埋め込んだリポジトリurl}
(※ 今回は「https://vbarista@github.com/vbarista/vue_app.git」)

# githubのmasterへpush
$ git push origin master
(※ 「Gtk-WARNING **: cannot open display」が出る時は一旦「$ unset SSH_ASKPASS」)

# developブランチを作成
$ git branch develop

# developブランチをPush
$ git checkout develop
$ git push origin develop

# yarn のインストール
$ sudo npm install --global yarn

# Webpack関連のファイルや設定
$ bundle exec rails webpacker:install
差分

# new file: .babelrc
# modified: .gitignore
# new file: .postcssrc.yml
# new file: app/javascript/packs/application.js
# new file: bin/webpack
# new file: bin/webpack-dev-server
# new file: config/webpack/configuration.js
# new file: config/webpack/development.js
# new file: config/webpack/loaders/assets.js
# new file: config/webpack/loaders/babel.js
# new file: config/webpack/loaders/coffee.js
# new file: config/webpack/loaders/erb.js
# new file: config/webpack/loaders/sass.js
# new file: config/webpack/production.js
# new file: config/webpack/shared.js
# new file: config/webpack/test.js
# new file: config/webpacker.yml
# modified: package.json
# new file: yarn.lock

# Vue.jsのインストール
$ bundle exec rails webpacker:install:vue
差分

# new file: app/javascript/packs/app.vue
# new file: app/javascript/packs/hello_vue.js
# new file: config/webpack/loaders/vue.js
# modified: package.json
# modified: yarn.lock

vuejsサンプルアプリケーションの作成を参考にソースを修正

# webpackのalias設定
# Vue2.0からランタイム用のvue.jsが標準になったので
# HTMLもビルド可能な完全ビルド用のvue.jsにalias設定
# ランタイム用はHTMLをコンパイルしてくれないのです・・・
# ここでハマッた・・・
# これやらないと
# vuejsサンプルアプリケーションの作成は動かなかった。
$ vi config/webpack/shared.js

resolve: {
extensions: settings.extensions,
+ alias: {
+ 'vue$': 'vue/dist/vue.js'
+ },

# JSのコンパイル
$ bin/webpack

# 開発環境での「webpack-dev-server」用の設定変更）
$ vi config/webpack.yml

dev_server:
host: {ホストのアドレス}
port: {ポート}

# JSのコンパイル・起動（開発環境用）
# これ最初よくわからなかったのだけど
# 起動しておくとヘルパーの「javascript_pack_tag」が
# webpack-dev-server で起動したインスタンス(URL)を設定してくれる。
$ bin/webpack-dev-server

# アプリの起動
$ bundle exec rails s -b 0.0.0.0 -p 3000

Way to go!