使いたくないVueの入門者が最初に躓きがちな問題として、「自分の環境でVue公式のサンプル通りにコンポーネントを書いてみても動かない!」ということがあると思う。Vueのimportの書き方が問題になる。'vue/dist/vue.esm.js'を使いましょう」という方法が紹介されていることが多いと思う。'vue'と書いたときに読み込まれる「ランタイム限定ビルド(vue.runtime.esm.js)」ではなく、「完全ビルド(vue.esm.js)」を使うようにする書き方なのだけど、なるべくランタイム限定ビルドを使ったほうが良いですよーというのが公式のおすすめ。軽量なため、利用できるときにはこれを利用したほうが良いでしょう。そんなにランタイム限定ビルドのほうが軽量と言われたらそっちを使いたくなる。vue/dist/vue.esm.jsが必要なのか。Vueでelオプションを使ったときや、templateオプションに直接HTMLのテンプレートを渡す場合は実行時にコンパイラが必要になるので、完全ビルドを使わざるを得なくなってしまう。ランタイム限定ビルドを使用するためには、コンパイラが必要ないコードにする必要がある。このあたりに関しては、この記事がめっちゃ詳しい。templateとコンパイラを完全解説するよvue/dist/vue.esm.jsを使わない方法templateオプションでcreateElementを使って頑張ったりJSXを渡ったりしたりvue-template-loaderを使ったりすればよいかもしれないが、別のパッケージを入れたり面倒。今までと同じように書きたい。単一コンポーネント(.vue)に書いたテンプレートに関しては、ビルド時にコンパイルされるため、実行時に完全ビルドは必要なくなる。elオプションもtemplateオプションも使わずに、全部コンポーネントに書いてしまう方法がある。単一コンポーネントをビルドできるようにしておく必要はある。数字をクリックするとカウントアップするVueアプリのコードがこれ。})})このコードでは、html側にテンプレートが書かれているので、実行時コンパイルのために完全ビルドが必要になる。このhtmlのテンプレートを単一コンポーネント側に持っていき、script部分はコンポーネントそのままではなくVue.extendを使用してVueのサブクラスコンストラクタを作成する。これならhtmlテンプレートが単一コンポーネント内に収まるため、ビルド時にコンパイルされ実行時コンパイルは不要になる。}})</script>重要なのは、$mountを使ってちゃんとマウントしてあげること。elオプションを使わない場合は、自分で任意のタイミングで$mountする必要がある。これで完全ビルドを使う必要がなくなり、めでたしめでたし。仕事ではdocbase.io、趣味ではuwaoe.netを開発。upLoginユーザーは見つかりませんでした。