テスト用のVue.jsアプリを作るときに、動作確認しやすいようにvue-cli
を使わずにCDNからスクリプトを読み込む形式で作りました。このときにどのようにコンポーネントを実装すればよいか調べるのに時間がかかったため、簡単に整理してみました。
ポイント
- スクリプト読み込み
- Vue.js本体 → コンポーネント → メイン(Vueインスタンス生成)の順で読み込む。
- head要素に上記の順序でscript要素を組み込むめばよい。(deferを指定するとレンダリングをブロックせずに高速化できる。)
- テンプレート
- 以下のいずれかの方法でVueコンポーネントのtemplateプロパティに設定する。(参考)
- HTMLのhead要素に
<script type="text/x-template>
でテンプレートを記述し、templateプロパティにセレクタ(#で始まる文字列)を指定して参照する。(src属性を使って外部ファイルに切り分けることはできない。) - templateプロパティに文字列としてHTMLを記述する。
サンプルアプリ
index.html
<html>
<head>
<!-- Vue.jsアプリケーション読み込み
※ new Vue() 実行前にコンポーネントを読み込むこと。 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" defer></script>
<script src="./component/string-template.js" defer></script>
<script src="./component/script-template.js" defer></script>
<script src="./script.js" defer></script>
<!-- scriptテンプレートを使ったコンポーネント -->
<script type="text/x-template" id="script-template">
<div>
<p>Script Template</p>
</div>
</script>
</head>
<body>
<!-- Vueアプリのマウントポイント -->
<div id="app"></div>
</body>
</html>
script.js
const app = new Vue({
el: '#app',
template: `
<div>
<string-template />
<script-template />
</div>
`
})
component/string-template.js
Vue.component('string-template', {
template: `
<div><p>String Template</p></div>
`
})
component/script-template.js
Vue.component('script-template', {
template: '#script-template'
})