原因

templateUrl使用ajax的方式在運(yùn)行時(shí)加載template，大型應(yīng)用中數(shù)量龐大的組件，以及瀏覽器對(duì)請(qǐng)求數(shù)量的限制，將導(dǎo)致嚴(yán)重的app加載性能問題。
以組件為APP的基礎(chǔ)單元來開發(fā)，而不是template

推薦單文件的組件開發(fā)

vue中綜合了react(單文件html字符串拼到死)，和angularjs(大量ajax獲取template)，提出my_component.vue的單文件組件開發(fā)，將template，style和js集中在一個(gè)文件中，利用webpack來構(gòu)建。目前sublime text已有vue文件的語法高亮插件，同時(shí)vue-cli也很給力，分分鐘搭建好基礎(chǔ)結(jié)構(gòu)。這都不是什么事兒了。

打死不用構(gòu)建工具/webpack

我們也還是有選擇的，雖然官方不推薦，但是也總不能把你打死啊

默默拼串

Vue.component('todo-item',{
props: ['title'],
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">X</button>\
</li>\
',
});

使用<script type="x/template">

<script type="text/template" id="tpl">
<div>
<p>hello vue</p>
</div>
</script>

var MyComponent = Vue.extend({
template: '#tpl'
});

最佳實(shí)踐

使用.vue單文件開發(fā)組件，使用webpack構(gòu)建