cdnでvuetifyを使うために

軽く要点を残す。

djangoでincludeを使ってコンポーネント化できたのでテンプレートの見通しが良くなった。
cdnを使ってコンポーネント化するとvuecliを入れる前にどんな感じでvuetifyや単一ファイルコンポーネントが使えるか確認できる。(もちろん全く同じではない。)

完成形イメージ

<body>
<my_template/>

{% include "my_template_vuejs.html" %}
</body>

"my_template_vuejs.html"でmy_templateタグの定義を行うとともに、vueの初期化でmy_templateタグを使えるように書く。そしてmy_templateタグを表示させたいところに配置する。

必要なこと

1 vue.jsが起動するテンプレートタグを設定する。

<body>
<my_template/> #これ
</body>

2 "my_template"タグの定義を書く

cdnでテンプレートを定義するときに注意しなければならないことがある。それは必ずscriptタグから書き始めること、templateタグを内部で書かないことである。特にtemplateタグを書いてしまうとエラーとなってしまうので注意が必要。またこのような書き方はインラインテンプレート記法と呼ぶようだ。Vue.js初心者向け：インラインテンプレートから単一ファイルコンポーネントの使い方まで - Qiita

touch hoge/my_template_vuejs.html

<script type="text/x-template" id="m_temp">

<p>自分の書きたいコンポーネントを書く。
ここにvuetifyのテンプレートを直接書き始めても正常に読み込まれる。</p>

</script>

3 同一ファイル内でvueの初期化を実施する

<script>

Vue.component("my_template", #呼び出したいテンプレート名
{ 
    template: "#m_temp", #上で定めたコンポーネントのid

});

new Vue({
    el: "m_temp",
    vuetify: new Vuetify() #Vuetifyを使う場合これを追加する
})
</script>

あとはインクルードで呼び出せば使える。

cdnでコンポーネント化する資料はココにもあった。こっちのが書き方が明快かも CDNで始めるVue.jsコンポーネント③ - Qiita

diadia

興味があることをやってみる。自分のメモを残しておきます。