Vue.jsで「Uncaught TypeError: Vue is not a constructor」が出た時の対応

バージョンの指定（固定）って、色んな所で結構必要になったりしませんか…？

業務でVue.jsのコードをレビューする必要が出てきたので、これを機に勉強を始めました。
AmazonのKindle Unlimitedで公開されている解説本を参考に、いわゆるHello Worldを出力するコードを記述。
Vueのコードなんてたった数行だし、さすがにこれくらいは表示されるだろうと思いきや…。あれ？想定していたメッセージが表示されない…。

記述したコード

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>VueによるHello World</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
  <div id="app">{{ message }}</div>
  <script>
    new Vue({
      el: '#app',
      data: { message: 'Hello World!' }
    })
  </script>
</body>

</html>

結果

{{ message }}

ブラウザの開発者モードでコンソールを見てみると、下記のエラーが発生している。

Uncaught TypeError: Vue is not a constructor

タイプミスか？と思って何度か見直ししましたが、問題はなさそう。
Vueの入門サイトもいくつか確認しましたが、大体似ている書き方。
また、そのサイトのコードをコピペして動かしても同じエラーが発生。

ここでふと、Vue.jsはバージョンが2系と3系で大きく仕様が変わった、というような記事を見たことを思い出す。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

でCDNから取得してますが、もしかしてこれバージョン3系を取得してたりしない？
と思って、特定のバージョンを指定して取得する方法を検索。その結果。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

のように記述しなおして実行すると、「Hello World!」を表示させることに成功しました。

バージョン3系からは初期化の方法が異なる（createAppを使うらしい）とのことで、バージョン2系の参考書を片手に勉強を始めた方で、同じエラーが出て困ってしまった方の参考になりましたら幸いです。

関連記事