この記事の内容
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
それぞれコードが異なるので順に紹介します。
① HTMLファイルの<head>タグ
<head>タグ内で、jsファイルを読み込む方法です
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- カウントアップのコード例
See the Pen 【Vue.js 3 】Hello World (HTML<script>) by Watson (@watsony) on CodePen.
② HTMLファイルの<body>タグ
<body>タグ内の最後で、jsファイルを読み込む方法です
<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ファイルでimport
jsファイルで読み込む方法です
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
- カウントアップのコード例
See the Pen 【Vue.js 3 】Hello World @ESmodules (HTML+JS) by Watson (@watsony) on CodePen.
いずれもVue.jsの読み込み先は unpkg.com で記述しましたが、jsdelivr など他のCDNサービスも選択可能です。
一方で、自身の環境にVue.jsをダウンロードして使用する場合は、URLの代わりにVue.jsのファイルパスに置き換えます。
まとめ
Vue.jsをCDN形式で読み込んで利用する方法を紹介しました。
公式サイトでも同じ内容を確認できますが、コードの全体像がわかりにくかったため、初心者でも簡単に試せるようにまとめました。