RailsとVue.jsを使ってみる

はじめに

今回はRailsとVue.jsを使う際に必要な設定などをまとめておきたいと思います。

環境

Rails + Vue.js

$ rails new sample_app --webpack=vue
  • webpackオプションを使用し、Vue.jsを使用したアプリを作成

Vue.jsの表示を確認

HomeControllerの作成
$ rails g controller home index
HomeController
class HomeController < ApplicationController
  def index; end
end
ルートの設定
Rails.application.routes.draw do
  root to: 'home#index'
end
Hello Vue!
<%= javascript_pack_tag 'hello_vue' %>
  • rails sで表示を確認してみる
    f:id:voyag:20210206230405p:plain
    Hello Vue!

devサーバーの設定

  • Vue.js関連のファイルの変更を自動で検出してコンパイルする
gem 'foreman'
#!/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で起動できる

  • foremanから起動する場合はProcfileが必要(Procfile.devではない)

$ bundle exec foreman start

参考

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

当サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。