如何组织Vue JS项目[文件和目录]：非Javascript方式
来自非javascript背景，我发现Vue.js非常直观且易于使用。我之前在Javascript方面的经验是在浏览器上使用JQuery和香草Javascript。
我使用Vue、Vue组件和Vue路由器创建了一个应用程序。一切都很好。
我的问题是，我最终在项目的一个index.html文件中写了很多代码。这个文件包含10多个模板，我已经创建并附加到我的应用程序中的不同组件。我想知道有没有一种非javascript的方式来将这些模板组织在单独的文件中。
我看到有一些选项使用webpack和browserfy来模块化项目。但来自非javascript背景，我觉得它们并不直观。我不想走node-npm的路，因为它有自己的学习曲线，而且它在我的项目中下载了十几个我不理解的文件和依赖项。我是一个老派，更喜欢下载文件并将其包含在网页中。
所以，你可能知道我要去哪里。我需要一个解决方案，我可以把我的模板作为单独的文件，并在不同的组件中读取这些文件。
我尝试过的：
- 声明我的组件中的模板。但是，在组件内部编写所有html并不是那么干净。这也让我的JS文件太大了。我更擅长将所有数据放在index.html中
- 将模板存储为较小的块"homepage.html"、"about.html"，并在我的组件中，使用$.get/$.load读取组件的就绪功能中的不同组件。这是可行的，但我仍然必须为每个组件启动一个额外的ajax调用，这是不有效的
请不要建议明显的节点npm[webpack和browserify]方式。我知道Vue支持这一点，但这需要一个学习曲线和完整的设置。这个问题的答案实际上会帮助其他对节点npm方式犹豫不决的开发人员。
如果你需要进一步澄清这个问题，请大声回答。
您提到的选项是您唯一真正的选项。。。模板的HTML需要在需要时可用，因此您必须立即将其包含在HTML文件中，或者使用AJAX或RequireJS等浏览器内加载程序加载它（以及允许它加载HTML的扩展https://github.com/requirejs/text)。
文件内模板适用于非常小的项目。随着项目的发展，您需要开始使用为此构建的工具。NPM岩石和你需要的每一个JS包都可以在几秒钟内包含在你的项目中。
我强烈建议您尝试Vue CLI
它确实使用node、npm、webpack并下载数十个文件你已经明确要求不要使用，所以让我澄清一下：
Vue CLI可以处理复杂性并为您配置webpack
你甚至不必知道它在使用webpack。
它对开发人员非常友好（甚至有一个内置的gui），与配置webpack配置相比，它降低了进入门槛。
我希望你也会发现它"直观易用"。