VueJS + JSPMでコメントとしてレンダリングされたコンポーネント

jspmとvue.jsを使って簡単なアプリケーションを構築しようとしました。VueJS + JSPMでコメントとしてレンダリングされたコンポーネント

<html> 
    <head> 
     <script src="bundle.js"></script> 
     <!--script src="jspm_packages/npm/[email protected]/dist/vue.min.js"></script--> 
    </head> 
    <body> 
     <div id="app"> 
      {{ message }} 
     </div> 
    </body> 
</html>

マイmain.jsファイル：私はこのような自己実行バンドルを構築しています

import Vue from "vue" 

const app = new Vue({ 
    el: '#app', 
    data: { 
     message: 'Hello Vue!' 
    } 
});

：

jspm bundle-sfx main.js bundle.js

Iを

は、これは私のhtmlファイルであります開いているブラウザ私はそのノードdiv#appがコメントノードに置き換えられているのを見ることができます。

またVueオブジェクトに$elでコメントノードを見ることができます：

を（jspm_packages/npm/[email protected]/dist/vue.min.jsからJSPMファイルでダウンロードしたからなど）私は別のファイルからのVueを使用する場合は、すべての作品を正しく

あなたは（JSが全体の束である）、このフィドルに再現し、この問題を見ることができます：

https://jsfiddle.net/oz7c82rw/

私のコードで何が悪いのでしょうか？なぜDOMノードが空のコメントとしてレンダリングされるのですか？

出典

2017-02-08 Randall Flagg

解決策ではありませんが、Chromeを使用している場合は、Vue.js開発ツールの拡張機能を入手してください。 Vueを使って開発する際に役立つ情報を提供します。また、htmlの先頭にスクリプトを含める理由は、bodyの最後のタグとしてそれを含めるのとは対照的です。ちょうど奇妙なものとして私を打ちました。 – peaceman

Webpackの設定はどのようなものですか？ –

https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build これはおそらく関連性があります。 –

import Vue from "vue"テンプレートコンパイラが含まれていないruntime-onlyビルドでは、pre-compiledテンプレートが必要です。あなたはあなたの例を取ると、runtime-onlyビルドを使用する場合は、次のメッセージが表示されなければならない：

を[Vueが警告]：テンプレートまたは定義されていない機能をレンダリング：コンポーネントのマウントに失敗しました。（ルート・インスタンスで見つかった）

あなたがここに見ることができるように：それは実行時のみの構築と仕事を得るためにはhttps://jsfiddle.net/aqxL6sjL/

を、私はVueのインスタンス上でレンダリング関数を作成する必要があります、そのよう：

const app = new Vue({ 
    el: '#app', 
    render: function(createElement) { 
    return createElement('div', {}, this.message) 
    }, 
    data: { 
    message: 'Hello Vue!' 
    } 
});

はここで更新フィドルです：https://jsfiddle.net/aqxL6sjL/1/

そして、それは何vueifyとです10はそれぞれbrowserifyとwebpackで使用されるため、テンプレートコンパイラは不要です。 jspmを使用している場合は、systemjs-plugin-vueを参照することをお勧めしますが、それはもはや維持されていないため、動作しなくなる可能性があります。

runtime onlyの代わりにstandalone-buildをバンドルするのが最も簡単な方法です。私はjspmを使用していないが、私はようなものになるだろうと思います。そこにかかわらず、問題はエラーが発生しますサードパーティのライブラリを使用しているときに、ランタイムとスタンドアロンの両方がインポートされているビルドを受けるかもしれないということです

import Vue from 'vue/dist/vue.common.js';

、正しいビルドを得られるようにエイリアスすることをお勧めしますが、どうすればいいのかはわかりません。jspmですが、マップの機能はhttps://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#map-configurationだと思います。

私はツールの開発者の選択についての独断決して思いませんが、あなたは、新鮮なvueプロジェクトを開始している場合、彼らはより良いサポートを持っているので、私もあなたのポイントに至るまで、あなたの代わりにwebpackまたはbrowserifyを使用することをお勧めvue-cliを介して足場を直接引き出すことができます。長期的には、あなたのプロジェクトを始動させ、将来的に助けを求めることにかなりの労力を費やす可能性があります。

出典

2017-02-15 14:48:06

VueJS + JSPMでコメントとしてレンダリングされたコンポーネント

答えて

関連する問題