🐹

Rails+VueでHello Vue!まで

2021/08/23に公開

rails new でアプリケーションを作成する

rails newには、Vueを簡単に使えるオプション--webpack=vueがあるので、それを指定してrails newします。
DBもMySQLを使うので、-d mysqlも一緒に指定します。※--database=mysqlと同じです。

rails new -d mysql --webpack=vue hello-vue

そして、いつもの起動するまでのコマンドをぽちぽち

rails db:create
rails s

はい。できた!(笑)

VueのHelloを表示する

Railsの Helloは表示できたので、VueのHelloを表示したいと思います。
デフォルトで用意されている「hello_vue.js」があるようなので、それを表示します。

HomeControllerをindexのみで作成します。

rails g controller Home index

routesの設定を変更し、rootをHomeのindexに変更します。

config/routes.rb
Rails.application.routes.draw do
  root to: 'home#index'

  get 'home/index'
  〜 略 〜
end

viewを書き換えます

app/views/home/index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

めっちゃ、そっけないけど・・・出来た!👍

この後は、Vueの勉強をして、画面を色々変更していって、バックエンド(Rails)側はAPIでデータのやり取りオンリーで作っていけば良いと思うので、調べながらやって行きたいと思います👍

Discussion