如何组织Vue-JS：非Javascript方式？

Question

如何组织Vue-JS项目[文件和目录]：非Javascript方式？

来自非JavaScript背景，我发现Vue.js非常直观且易于使用。我之前在Javascript方面的经验是在浏览器上使用JQuery和vanilla javascript。

我使用Vue，Vue组件和vue路由器创建了一个应用程序。一切正常。

我的问题是，我最终在我的项目的单个index.html文件中编写了大量代码。此文件包含我创建的10多个模板，并附加到我的应用程序中的不同组件。我想知道有一种非javascript方式可以在单独的文件中组织这些模板。

我看到有一些选项可以使用webpack和browserify来模块化项目。但是来自非JavaScript背景，我发现它们并不直观。我不想去node-npm方式，因为它有自己的学习曲线，而且它在我的项目中下载了十几个文件和依赖项，我不明白。我老了，下载文件并将它们包含在网页中更加舒服。

很可能，你明白我要去哪里。我需要一个解决方案，我可以将模板作为单独的文件，并在不同的组件中读取这些文件。

我尝试过：

• 声明组件内的模板。但是在组件中编写所有html并不是那么干净。它也使我的JS文件太大了。我最好把所有数据放在index.html中。
• 将模板存储为较小的块“homepage.html”，“about.html”，在我的组件中，使用$ .get / $ .load来读取组件的ready函数中的不同组件。这可以工作，但我仍然需要为每个组件激活额外的ajax调用，这是无效的。

请不要建议明显的node-npm [webpack和browserify]方式。我知道这是Vue所支持的，但这需要一个学习曲线和完整的设置。对这个问题的回答实际上会帮助那些犹豫不决的节点npm方式。

如果您需要更多澄清问题，请大声回答。

Answer 1

您提到的选项是您唯一真实的选项...模板的HTML需要在需要时可用，因此您必须在html文件中将其放在蝙蝠中，或者使用AJAX加载它或者像RequireJS这样的浏览器内加载器（以及允许它加载HTML https://github.com/requirejs/text的扩展名）。

文件内模板适用于非常小的项目。随着项目的增长，您需要开始使用为此构建的工具。 NPM摇滚以及您需要的每个JS包都可以在几秒钟内包含在您的项目中。

Answer 2

我强烈建议您尝试Vue CLI

它确实使用节点，npm，webpack并下载了许多文件。 您已明确要求不使用，所以让我澄清一下：

Vue CLI解决了复杂性并为您配置了Webpack。
您甚至不必知道它正在使用webpack。

它对开发人员非常友好（甚至有built-in gui），与配置Webpack配置相比，它降低了进入门槛。

我希望您还会发现它“直观且易于使用”。