この記事の内容

Vue.jsを利用するために必要な雛形のコードを、3種類のインポート方法(CDN形式)で紹介します。
いずれの方法もインストール不要で、HTMLファイルもしくはJSファイルにコピペするだけでVue.jsを始められます。

また、Vue.jsでカウントアップするWebアプリのコード例も合わせて紹介します。

Vue.jsとは

Vue.js はユーザーインターフェースの構築のための JavaScript フレームワークです。
ユーザーのブラウザ操作に応じて、表示を変化する仕組みを簡単に実装することが可能です。

他に似たようなフレームワークとして、React、jQuery、Angular などがあります。

Vue.jsを読み込むコードは、以下の3箇所で記述できます。

① HTMLファイルの<head>タグ
② HTMLファイルの<body>タグ
③ JSファイルでimport

それぞれコードが異なるので順に紹介します。

<head>タグ内で、jsファイルを読み込む方法です

index.html

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

<body>タグ内の最後で、jsファイルを読み込む方法です

index.html

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
</script>

See the Pen 【Vue.js 3 】Hello World @ESmodules (HTML) by Watson (@watsony) on CodePen.

jsファイルで読み込む方法です

index.js

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

いずれもVue.jsの読み込み先は unpkg.com で記述しましたが、jsdelivr など他のCDNサービスも選択可能です。

一方で、自身の環境にVue.jsをダウンロードして使用する場合は、URLの代わりにVue.jsのファイルパスに置き換えます。

Vue.jsをCDN形式で読み込んで利用する方法を紹介しました。

公式サイトでも同じ内容を確認できますが、コードの全体像がわかりにくかったため、初心者でも簡単に試せるようにまとめました。