Can we keep HTML, JS and CSS files separate while creating Vue.js components like in Angular?

Question

Can we keep HTML, JS and CSS files separate while creating Vue.js components?
I've gone through "Why Vue.js doesn't support templateURL" article. The article itself says

"Proper modularization is a necessity if you want to build anything large and maintainable."

However, itself limits the possibility to modularize the code further. I'm coming from an Angular background and I feel separating HTML, JS and CSS is really helpful during development. However the author of the above article has a different opinion. However, this option should have been left up to the developer, so that at least during development he can separate HTML, JS and CSS if he's comfortable doing that.
Apart from modularity, doing the separation will help in being able to reuse these assets anywhere else. All this is lost with the existing opinion.

He also says,

Well, maybe it’s time to up the game a bit and use a proper module bundler like Webpack or Browserify. It might seem daunting if you’ve never dealt with them before, but trust me it’s worth it to take the leap.

但是这是什么意思？这是否意味着如果我们使用Webpack或Browserify之类的模块捆绑器就可以实现？如果是，怎么办？

说了这么多，有没有办法做到这一点？

Answer 1

恕我直言，当您接近一个新框架时，您通常需要将其他框架的约定抛在脑后。例如，尝试以 Angular风格硬塞到 Vue 项目中很可能会带来更多痛苦，并限制新框架的好处。这对于 React、Aurelia、Ember 等都是一样的。他们都以自己的方式做事，出于多种原因，最好遵循他们的约定。

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

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

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

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

Answer 2

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

<!-- 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分离为单独的文件来利用其热重装和预编译功能