railsとvue.jsの初期環境構築をしたいなと思いました

環境
ruby2.6.3
rails6.1.2.1
yarn 1.22.10
v14.15.3
vue@2.6.12 (npm list vueで確認できます)

ステップ1　アプリを作成

webpackありでアプリを作成する。データベースにポストグレスを使う。
$ rails new アプリ名　--webpack=vue　-d postgresql
データベースの作成
$ bundle exec rails db:setup
バックエンド側サーバーの起動
$ bundle exec rails server
フロントエンド側サーバーの起動
$ bin/webpack-dev-server

ステップ２　Procfileを作成する

Procfile

rails: bundle exec rails s -p 3000
webpack: ./bin/webpack-dev-server

変更があるたびに毎回コンパイルするのは面倒なので、gem 'foreman'を使ってrails sするだけで変更が反映された状態で開発していきたい。ルートディレクトリにProcfileを作成する。

Gemfile

gem 'foreman'

bundle install実行した後、
$ bundle exec foreman startを実行

ステップ３　ルーティングを設定

routes.rb

Rails.application.routes.draw do
  root to: 'home#index'
end

ステップ４　homecontrollerにindexアクションを追加して作成する

home_controller.rb

def index; end

ステップ５　bootstrapを追加する

yarn add bootstrap@4

bootstrap４系を追加し、app/javascript/packs/hello_vue.jsに下記を追加する

app/javascript/packs/hello_vue.js

import 'bootstrap/dist/css/bootstrap.css'

ステップ６ トップページを作成する

app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>

app/javascript/app.vue

<template>
<div id="app" class="d-flex flex-column min-vh-100">
  <header class="mb-auto">
    <nav class="navbar navbar-dark bg-dark">
      <span class="navbar-brand mb-0 h1">{{ title }}</span>
    </nav>
  </header>
  <div class="text-center">
    <h3>テキスト</h3>
    <div class="mt-4">Vueアプリ</div>
  </div>
  <footer class="mt-auto text-center">
　　　フッター
  </footer>
</div>
</template>

<script>
export default {
  name: "Top",
  data() {
    return {
      title: "タイトル"
    }
  }
}
</script>

<style scoped>
</style>

rails sしてからlocalhost:3000にアクセスし、表示されていれば成功です。
間違いなどありましたらご連絡ください