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

【问题标题】：How to organize Vue-JS : Non Javascript way?如何组织 Vue-JS：非 Javascript 方式？
【发布时间】：2016-01-10 13:47:21
【问题描述】：

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

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

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

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

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

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

我尝试过的：

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

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

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

【问题讨论】：

标签： javascript vue.js project-organization

【解决方案1】：

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

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

【讨论】：

确实如此.. 我明白学习 node-npm 和 webpack 的基础知识似乎是有正当理由的。但这超出了我的联盟+学习曲线以及安装和依赖项将让我永远完成我的应用程序。因此，我避免潜入另一个选项的海洋，并想知道是否有一些老派的方法来做到这一点。
不是想把你推入其中，但当我从“传统”方法过渡时，我 laracasts.com 确实提供了帮助。

【解决方案2】：

我强烈建议您尝试Vue CLI

它确实使用 node、npm、webpack 并下载数十个文件。 你已经明确要求不要使用它，所以让我澄清一下：

Vue CLI 负责处理复杂性并为您配置 webpack。
你甚至不必知道它正在使用 webpack。

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

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

【讨论】：