来自新Vue用户的一个非常常见的问题，特别是那些以前使用过Angular的用户，是“我能拥有templateURL吗？”。我已经回答了这么多次，我认为最好写一些关于它的东西。

在Angular中，templateURL或ng-include允许用户在运行时动态加载远程模板文件。这看起来相当方便，但我们可以重新思考它解决了什么问题。

首先，它允许我们在一个单独的HTML文件中编写我们的模板。这给了我们在编辑中正确的语法高亮，这可能是许多人喜欢这样做的原因。但是分裂你的JavaScript代码和模板真的是最好的方法吗？对于Vue.js组件，其模板和JavaScript本质上是紧密相连的 – 事实上，如果它们在同一个文件中，事实上它会更简单。在两个文件之间来回切换的上下文切换实际上使得开发体验变得更糟。从概念上讲，组件是Vue.js应用程序的基本构建块，而不是模板。每个Vue.js模板都与一个附带的JavaScript上下文相关联 – 将它们分开的意义不大。

其次，因为templateURL在运行时通过Ajax加载模板，所以不需要构建步骤来拆分文件。这在开发过程中非常方便，但是如果要将其部署到生产环境中，则会产生严重的成本。在普遍支持HTTP / 2之前，HTTP请求的数量仍然可能是您的应用的初始加载性能中最关键的因素。现在想象你使用templateURL对于应用中的每个组件 – 浏览器在显示任何内容之前都需要执行数十个HTTP请求！如果您不知道，大多数浏览器会限制它可以在单个服务器上执行的并行请求数。当你超过这个限制时，你的应用程序的初始渲染将受到浏览器必须等待的每一次额外往返的影响。当然，有些构建工具可以帮助您预先注册所有这些模板$templateCache- 但是这显示出构建步骤实际上对于任何严重的前端开发来说都是不可避免的。

所以，没有templateURL，我们如何处理发展经验问题？将模板编写为内联JavaScript字符串非常糟糕，伪造模板

<script type="x/template">同样感觉像是黑客。那么，也许现在是时候升级游戏了，并且使用了像Webpack或Browserify这样的合适模块打包程序。如果你以前从未与他们进行过交易，这可能看起来令人望而生畏，但请相信我，这是值得的。如果你想建立任何庞大的和可维护的，适当的模块化是必要的。更重要的是，你可以将Vue组件写入单个文件，具有适当的语法突出显示和定制预处理器的额外优势，热重载，默认情况下为ES2015，自动修复和范围化CSS，这使开发体验好10倍。

最后，Vue允许您延迟加载组件，而使用Webpack则非常简单。虽然这只是一个问题，当你的初始捆绑如此之大以至于你最好将它拆分开来。

考虑组件，而不是模板。