Rails × Vue3初学者手引き①マウントの仕方編

概要

初めまして、今年こそ掲げた目標は達成したいと意気込んでいるMittonです。

みなさんVue書いてますか？
自分は弊社サービスにて脱jQueryのため最近書き始め、大分フローが掴めてきたところです☺︎
キャッチアップもひと段落したためここらで備忘録としてまとめておく所存です。
同じく初学者の手助けに少しでもなれれば幸いです^^

バージョン情報

※弊社ではRuby on Railsにwebpackerを使用して導入しております（環境構築に関してはまた別の機会に・・

ツール	バージョン
node	14.7.0
vue	3.2.20
rails/webpacker	4.3.0
Rails	5.0.7.2(近々バージョンアップ予定)
Ruby	2.6.6(近々バージョンアップ予定)

Webpackerにおけるディレクトリ構成

javascript/
└─ packs/
|  └─ top/
|     └─ index.js
└─ src/
   └─ components/
      └─ top/
         └─ index.vue

webpackerはデフォルトでpacks配下がエントリーファイルのパスとなっています。
ディレクトリ名に困ったのですが、ひとまずsrcとし、その配下にcomponentsを作成いたしました。
SFCなどへ移行する際はsrc配下にpagesなどのディレクトリを作成して対応する所存です。
（関係ないですが本当はjavascriptというデフォルトのディレクトリ名も変えたい・・笑）

マウントの仕方

1. まずはマウントのベースとなるhtmlファイルを用意（弊社はslimを使用）

index.html.slim

/ idを設定（id以外もできるのかも・・？idにマウントするのがデファクトスタンダードのよう
.index id='index'

/ マウント内容を記載したjsファイルをインポート
= javascript_pack_tag "top/index"

2. マウント用のJSファイルを作成

index.js

import { createApp } from "vue";
// マウントしたいvueファイルをインポート
import Index from "../../src/components/top/index";

// document~はおまじない
document.addEventListener("DOMContentLoaded", () => {
 createApp( Index ).mount('#index');
});

3. 置換するためのvueファイル作成

index.vue

<template>
  <div class="index">
    <p>Hello, Vue!</p>
  </div>
</template>

<script>
　export default {
  }
</script>

 ~~ 以下略 ~~

おわりに

少し早いですが初回のため今回はこの程度にしておこうかと思います^^
次回はデータの受け渡し方についてまとめる所存です！
いっぱいvue書いていくぞ〜お楽しみにー！