我们在创建Vue.js组件时能否像Angular一样保持HTML，JS和CSS文件分离？

Question

在创建Vue.js组件时，我们能否将HTML、JS和CSS文件保持分离状态？
我阅读了"Why Vue.js doesn't support templateURL"文章。文章本身说

"如果你想构建任何大型且易于维护的东西，适当的模块化是必需的。"

然而，这本身限制了进一步将代码模块化的可能性。我来自Angular背景，我觉得在开发过程中分离HTML、JS和CSS非常有帮助。但是上述文章的作者持有不同的观点。然而，这个选项应该留给开发人员自己决定，这样至少在开发过程中，如果他习惯这样做，就可以分离HTML、JS和CSS。
除了模块化之外，进行分离还有助于能够在任何其他地方重用这些资源。所有这些都失去了现有观点。

他还说，

好吧，也许现在是时候升级游戏并使用像Webpack或Browserify这样的适当的模块打包程序了。如果你以前从未处理过它们，可能会感到令人生畏，但请相信，为了迈出这一步，这是值得的。

但这是什么意思？这是否意味着如果我们使用像Webpack或Browserify这样的模块打包程序，就可以实现这一点？如果是，怎么做？

说了这么多，有没有办法实现这个目标？

- Temp O'rary

Answer 1

我在文档中找到了这个，但不确定它是否符合您的要求

<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

并 文档注释

即使您不喜欢单文件组件的想法，仍可以通过将JavaScript和CSS分开到不同的文件中来利用其热重载和预编译功能。

- mistertee

---

这绝对是在这种情况下最合适的方法...直到我读到Mark Cooper在下面的回答之前，我都打算使用它。我同意他的观点，试图将一个框架的实践硬塞到另一个框架中可能不是最好的方法。因此，我将按照“Vue方式”完成这个第一个项目。也许在我建立了十几个这样的项目之后，我会有Vue的经验来做出判断，并且我也会知道通过进行这些更改是否会牺牲什么（如果有的话）。 - anothercoder

作为一名有经验的React和Angular开发者，我对Vue持怀疑态度，因为即使在React出现之前，将JS/HTML/CSS放在同一个文件中始终被认为是一种不好的做法。这也是早期React最大的批评之一，所有内容都在JS中。我很高兴能够在Vue中实现这一点，因为我曾考虑放弃Vue。 - MK4

从我的角度来看，没有单一的最佳方法。这取决于您是否希望您的应用程序随着框架/库的死亡而消失。如果我希望我的应用程序在时间上尽可能持久，我会尽可能少地使用框架/库，以便在需要时可以轻松迁移。让我们面对现实，框架/库随着时间的推移而改变。如果您按照“框架的方式”做所有事情，那么如果您想迁移到另一个框架，您很可能必须从头开始重写所有内容。因此，保持CSS分离对于这种情况是有好处的。 - whitefang1993

Answer 2

我认为，当你接触一个新的框架时，通常需要放弃其他框架的传统。例如，试图将Angular的 风格 强行加入Vue项目中可能会导致更多的痛苦，并限制新框架的好处。这同样适用于React、Aurelia、Ember等框架。它们都有自己的方式来做事情，最好遵循它们的传统，因为有许多理由。

回答您的问题：我没有找到一种分割文件的方法，这个功能确实不错；

- myfile.html.vue
- myfile.css.vue
- myfile.js.vue

我的最近关于Vue的研究发现，将相关元素组合成单个*.vue文件可以获得封装的好处。但是，好的封装的代价通常是重复性的。您需要决定什么是最适合您的模式 - 不要重复自己或单一职责？

我还发现，我可以在简单示例中使用嵌入式Vue脚本和内联代码，但是一旦我转移到*.vue文件，我就需要考虑模块绑定器。一旦这变得明显，Vue的简单性（表面上是主要的卖点）有点丧失了。

- Mark Cooper

---

除了模块化之外，将HTML、JS和CSS分开可以帮助在任何其他地方重用它。所有这些都在现有观点中丢失了。 - Temp O'rary

我同意你的观点。如果他们能够提供这种分离资产的能力，它将会继续保持简单。 - Temp O'rary

虽然“好的封装的权衡通常是重复”，并且DRY是单一职责的对手，但我不同意。这些并不是互相排斥的事情！ - agoldev

Answer 3

在我看来，组件变得非常长时，将HTML、CSS和JS拆分出来以便于导航是很有益的。怀疑者可能会指出这是你的组件应该被分成更小的部分的迹象，也许这是真的，但无论如何。

以下是操作步骤。

Vue支持“混合”。这使您可以将几乎所有的JS移动到一个混合文件中，并且它将被继承到组件中。此时在组件文件中留下的实际JS代码非常少（只有定义混合的约4行代码）。

然后，您可以将CSS移到外部文件中，使用@import引入。不过，我认为您可能会失去使用“scoped”的能力。

此时，您的组件文件仅包含99％的HTML。

- Dan D

Answer 4

说实话，我认为那些想要单文件组件的人从来没有为业务应用程序编写过前端。我们有表单，有时会跨越20-30行，在屏幕上显示时，需要约100个自定义组件的HTML模板。

对于这样的组件来说，来回滚动是很痛苦的。我也不太能理解如何合理地将表单切分为子组件。

我的工作流程是将Javascript和相关的视图模板并排放在一个监视器上，另一个监视器上则是浏览器及其开发面板。这看起来很不错。我无法理解一些人的顽固态度。我正在研究Vue.js作为我们当前过时CanJS实现的替代品，但这是一个主要障碍。

- Guido Smeets