サイトアイコン わんすけに聞いてみる

ブラウザだけでVue.jsの単一ファイルコンポーネントを試す

yizm

Vue.jsに関しては完全独学で、手探りでリファレンス見ながら進めてます。

リファレンスの上から順に試しながらこの辺の記事を書きました。

Vue.jsを試しに使ってみたので考え方を整理する。

[jsライブラリ]Vue Selectの使い方を試す。

 

ここまではよかった。

とりあえず、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>

すると、こうなる訳だ！


以下、ブラウザのみで使う場合の編集ポイントです。

 

さーて、再利用できる単一ファイルコンポーネントのサンプルコード集めまくって素敵なWebアプリを作ろうではないか???

参考
Nodeがなくてもvueファイルを使いたい
基礎から学ぶ Vue.js

 

モバイルバージョンを終了