VueをCDNで使う

　まとめておく。

ありか

2版

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

• 2 installation

3版

<script src="https://unpkg.com/vue@next"></script>

• 3 installation

　上記は開発用なのでファイルサイズが大きい。ほかにも選べるものがある。

選ぶもの	値
ホスティングサイト	cdnjs.com, unpkg.com, cdn.jsdelivr.net, etc...
版	2, 3
開発／本番

　cdnjs.com/vueから3.0.5版をみてみると以下。

ファイル	サイズ	概要
vue.global.js	517 KB	開発用
vue.global.prod.js	107 KB	本番用

　本番用は以下。だいぶ軽くなった。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.prod.js"></script>

• vue/dist/vue.esm.js って何

ビルド種別	パス	コード
完全ビルド	vue.esm.js	import Vue from 'vue/dist/vue.esm.js'
ランタイム限定ビルド	vue.runtime.esm.js	import Vue from 'vue'

使い方

• ブラウザで動かす
• ローカルで使う

ブラウザで動かす

　とにかく動作確認したいとき。参考

1. Vueを読み込む
2. テストコードを書く
3. 触ってみる

1. Vueを読み込む

1. ブラウザのデベロッパツールを開く。(Ctrl+Shift+I)
2. Consoleタブをクリックする
3. 以下コードを入力する

document.body.appendChild(
  (() => {
    const s = document.createElement("script");
    s.src = "https://unpkg.com/vue@next";
    return s;
  })()
);

　以下メッセージが出たらロード成功。

You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.

2. テストコードを書く

　以下コードを入力する。

document.body.insertBefore((() => {
  const d = document.createElement("div");
  d.id = 'app';
  return d;
})(), document.body.firstChild);
const app = Vue.createApp({
  template: '<my-component />'
})
app.component('my-component', {
  template: `
    <h1>Hello Vue3 !!</h1>
    <input v-model="message"/>
    <div>{{ upperCase }}</div>
  `,
  setup() {
    const message = Vue.ref('Some message');
    const upperCase = Vue.computed(() => message.value.toUpperCase());
    return {
      message,
      upperCase
    }
  }
})
app.mount('#app');

3. 触ってみる

1. 画面トップに出たテキストボックスがある
2. 1に何か文字を入力する
3. 1の下に大文字化された入力テキストが出る

ローカルで使う

ファイル	サイズ	概要
vue.global.js	517 KB	開発用
vue.global.prod.js	107 KB	本番用

1. 上記URLをブラウザで開く
2. Ctrl+Aキーで全テキスト選択する
3. ローカルにテキストファイルを作成する
4. コピペする

　あとはHTMLで取り込むだけ。ファイルパスを指定すること。

<script src="./vue.3.0.5.min.js"></script>

　なお、ES Module を使うにはローカルサーバを起動せねばならない。さもなくばCORSエラーになる。

<script src="./vue.3.0.5.min.js" type="module"></script>

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

対象環境

• 2021-01-22
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux