javascript - 如何组织Vue-JS : Non Javascript way?

Question

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

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

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

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

我看到有使用 webpack 和 browserify 来模块化项目的选项。但由于我没有 javascript 背景，我觉得它们并不直观。我不想采用 node - npm 方式，因为它有自己的学习曲线，而且它会在我的项目中下载十几个我不理解的文件和依赖项。我是老派，更喜欢下载文件并将它们包含在网页中。

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

我尝试过:

• 在我的组件内声明模板。但是在组件中编写所有 html 并不是那么干净。它还使我的 JS 文件太大。我最好将所有数据放在 index.html 中。
• 将模板存储为较小的 block “homepage.html”、“about.html”并在我的组件中，使用 $.get/$.load 在组件的 Ready 函数中读取不同的组件。这可行，但我仍然必须为每个组件触发额外的 ajax 调用，效率不高。

请不要建议明显的node-npm [webpack 和 browserify] 方式。我知道这就是 Vue 支持的内容，但这需要学习曲线和完整的设置。这个问题的答案实际上会帮助那些犹豫是否要采用 node-npm 方式的开发人员。

如果您需要对该问题进行更多说明，请大声回复。

Answer 1

您提到的选项是唯一真正的选项...模板的 HTML 需要在需要时可用，因此您要么必须立即将其包含在 html 文件中，要么使用 AJAX 加载它或像 RequireJS 这样的浏览器内加载器(以及允许加载 HTML https://github.com/requirejs/text 的扩展)。

文件内模板对于非常小的项目很有意义。随着项目的发展，您需要开始使用为此构建的工具。 NPM 非常强大，您需要的每个 JS 包都可以在几秒钟内包含在您的项目中。