CDNでVue 3を使用する

はじめに

Vue.jsで作成したプログラムの「ビンゴゲーム」と「宣言的レンダリング & リアクティビティ」で、CDMのvueの読み込み方が異なっている。

<head>タグの中に以下を記入している。

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

</main>の後に以下を記入している。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

vueスクリプトが実行される前であれば、どこでもいい。

<head>内、</body>直前に書かれるのが典型的なパターン。

</body>の直前に書くと、DOMが確実にレンダリングされた後なので、安心できる。

globalは開発用でサイズが大きい。エラーメッセージがある。

prodは本番用でサイズが小さい。エラーメッセージがない。