Javascript 在创建Vue.JS组件（如Angular）时，我们能否将HTML、JS和CSS文件分开？

在创建Vue.JS组件时，我们可以将HTML、JS和CSS文件分开吗？
我看完了这篇文章。文章本身说

“如果你想构建任何东西，适当的模块化是必要的 大型且可维护。”

然而，它本身限制了进一步模块化代码的可能性。我来自一个有角度的背景，我觉得在开发过程中分离HTML、JS和CSS真的很有帮助。然而，上述文章的作者有不同的观点。然而，这个选项应该留给开发人员，这样至少在开发过程中，如果他愿意的话，他可以分离HTML、JS和CSS。
除了模块化之外，进行分离将有助于在其他任何地方重用这些资产。所有这一切都失去了现有的观点

他还说,

嗯，也许是时候把游戏升级一点，使用一个合适的模块绑定器，比如Webpack或Browserify。如果你以前从未与他们打过交道，这可能会让人望而生畏，但相信我，迈出这一步是值得的

但这意味着什么？这是否意味着，如果我们使用像Webpack或Browserify这样的模块绑定器，就可以实现这一点？如果是，如何进行

---

说到这里，有什么方法可以实现这一点呢？

当你接近一个新的框架时，你通常需要抛弃其他框架的惯例。例如，尝试在Vue项目中使用角度样式可能会带来更多的痛苦，并限制新框架的好处。这对于React、Aurelia、Ember等也是一样的。他们都以自己的方式做事，出于许多原因，最好遵循他们的惯例

回答你的问题：例如，我没有找到一种分割文件的方法，我同意这会很好

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

我最近对Vue的研究发现，将相关元素组合到一个*.Vue文件中，将带来封装的好处。但良好封装的代价通常是重复。你需要决定什么样的模式最适合你-不要重复你自己或单一的责任

---

我还发现，对于简单的例子，我可以使用嵌入的VUE脚本和内联代码，但是一旦我移到<强> *.vu>强>文件，我就需要考虑一个模块绑定器。一旦这一点变得明显，vue的简单性（从表面上看，它是主要的销售功能）就失去了一些

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

<!-- 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分离为单独的文件

---

在我看来，有一点是肯定的，组件可能会变得很长，为了导航的目的，分离HTML、CSS和JS是有益的。怀疑论者可能会指出，这是一个迹象，表明您的组件应该被分解成更小的部分，也许这是真的，但无论如何

这就是你能做到的

Vue支持“混合”。这允许您将几乎所有的JS移动到一个mixin文件中，并将其继承到组件中。此时留在组件文件中的实际JS代码非常少（仅定义mixin的~4行代码）

然后，您可以将CSS移动到一个外部文件中，并使用@import将其拉入。我认为您可能会失去使用“范围”的能力

---

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

除了模块化之外，分离HTML、JS和CSS将有助于在其他任何地方重用它。所有这些都失去了现有的观点。我同意你的看法。如果他们能够提供这种分离资产的能力，那么它将继续是简单的。尽管在

上存在分歧，但良好封装的代价通常是重复
，而DRY是单一责任的对手。这些不是相互排斥的事情！！这看起来绝对是这个场景中最合适的方法……在我读到下面Mark Cooper的答案之前，我一直在使用这个方法。我同意他的观点，即试图将实践从一个框架硬塞进另一个框架可能不是最好的方法。出于这个原因，我将做第一个项目“Vue方式”。也许在我构建了十几个这样的系统之后，我会有使用Vue进行判断的经验，而且我也会知道做这样的更改会牺牲什么（如果有的话）。