Vue.jsに関しては完全独学で、手探りでリファレンス見ながら進めてます。
リファレンスの上から順に試しながらこの辺の記事を書きました。
ここまではよかった。
とりあえず、HTMLの中にCDNでVue.jsを読みこんだら動いていろいろ試せてたけど、途中でつまづいたので纏める。
１．TypeScript ＋ Node.js環境での情報ばっかり。
個人的にはMVVM系の開発思想って結構好きでVue.jsって直感的にわかりやすいからこれからも使っていきたいなーと思ってたんだけど、やはりググるとTypescript ＋ Node.js環境での情報ばっかりでてくる。
このサイト上でフロントページだけ動かしたいからフロントサイドの制御だけで使ってみたいんだよねぇ～・・・?
単一ファイルコンポーネントってやつを使ってみたかったけど、
試しに、そのまんまコード貼り付けてみたらいっぱいエラー出る訳ですよ（当たり前だけど?）
特に詰まったのは、この辺。
import TabItem from './xxxxx.vue'
❌Uncaught SyntaxError: Cannot use import statement outside a module
export default {
❌vue.js:634 [Vue warn]: Failed to resolve async component: function() {
・・・省略・・・
Reason: SyntaxError: Unexpected token 'export'
２．単一ファイルコンポーネントって何だ。
.vueという拡張子でHTMLベースのテンプレート構文と、そこに紐づけるViewModelのJavascriptコードと、そのテンプレート構文に適用するCSSをセットにして部品化して作っといてそれらを再利用できる様に管理できると。
・・・最高じゃん。って思う訳ですよ。
正直、肥大化したCSSファイルとHTMLコード眺めるのって嫌だったのよねぇー?
ちなみに、ブラウザだけで動かす場合、こんな感じになる。（これを xxxx.vueとして保存。）
<template>
<button @click="$emit('input', id)" :class="[active, 'tab']">
{{ label }}
</button>
</template>
<script>
module.exports = {
props: {
id: Number,
label: String,
value: Number
},
computed: {
active() {
return this.value === this.id ? 'active' : false
}
}
}
// export default { Node.jsじゃないから、これだとダメだった。 }
</script>
<style scoped>
.tab {
border-radius: 2px 2px 0 0;
background: #fff;
color: #311d0a;
line-height: 24px;
}
.tab:hover {
background: #eeeeee;
}
.active {
background: #f7c9c9;
}
</style>
３．ブラウザだけだと.vueファイルが読み込みない。
で、浅知恵ながらも単一ファイルコンポーネントって最高の機能じゃん！って思うんだけど
紹介されてるサンプルコードが、ほぼほぼTypeScript ＋ Node.js環境のものなのね。
そもそも、ブラウザでVue.jsをロードしただけじゃ.vueファイルの構造を解釈できる訳がない
訳ですよ。
しかし、そこは便利な世の中でございます?
しっかりそこに対応するライブラリがございました！っていうのが今日のお話。
FranckFreiburger/http-vue-loader - GitHub
CDNがあるので、とりあえずVue.jsの後ろでこう読み込めばいい。
<script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/http-vue-loader"></script>
Vueのインスタンス生成する時にcomponentsのオプションでhttpVueLoaderってのを呼び出して使う。
'コンポーネント名': httpVueLoader('.vueファイルのパス')
そーすっと、.vueファイルの構造をしっかり読み取ってコンポーネントが生成される様になるのだ。
サンプルコードだと「.vueファイルのパス」の部分に./xxxx.vueみたいな形式になってるの多いけど、https://～からフルで書かないと記事内ではURLパス変わった時に404エラー出るね?
実際は、こんな感じ？
<div id="main_app">
<TabLayout />
</div>
<script type="text/javascript">
<!--
var app = new Vue({
el: "#main_app",
components: {
'tablayout': httpVueLoader('https://yizm.work/script/vue_mdl/TabLayout.vue')
}
});
-->
</script>
すると、こうなる訳だ！
以下、ブラウザのみで使う場合の編集ポイントです。
- 普通にNode.jsでやるみたいにimportだと上手く動かなかった。
- .vueファイルのJavascriptも、『export default』の部分を『module.exports』に置き換える必要がある。
さーて、再利用できる単一ファイルコンポーネントのサンプルコード集めまくって素敵なWebアプリを作ろうではないか???
参考
Nodeがなくてもvueファイルを使いたい
基礎から学ぶ Vue.js
