Vue2からVue3に書き換え - mecobalamin’s diary

Webデザインの勉強のためにVue.jsの本を読み始めたのだが初っ端でつまずいた
本に書かれているとおりにコードを書いて表示させると

{{ message }}

デベロッパーツールでエラーの場所を確認すると以下のエラーメッセージ

Uncaught TypeError: Vue is not a constructor

同じエラーで記事を書いている人がいた
minamino-heya.com
qiita.com

Vue.jpのバージョン違いで書き方が大きく変わっているらしい
読み始めた本はVue2系で書かれているようだ
先程の記事を参考にVue2とVue3で書いてみた

Vue2の場合

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello, world!</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    message: "Hello World!"
                }
            });
        </script>
    </body>
</html>

Vue3の場合

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Hello, world!</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
        <script>
            const app = {
                data(){
                    return{
                        message: "Hello World!"
                    };
                }
            };
            Vue.createApp(app).mount("#app");
        </script>
    </body>
</html>