我們可以像在 Angular 中一樣創建 Vue.js 組件時將 HTML、JS 和 CSS 文件分開嗎？

Question

我們可以在創建 Vue.js 組件時將 HTML、JS 和 CSS 文件分開嗎？
我已經閱讀了“為什么 Vue.js 不支持 templateURL”一文。 文章本身說

“如果您想構建任何大型且可維護的東西，則必須進行適當的模塊化。”

然而，它本身限制了進一步模塊化代碼的可能性。 我來自 Angular 背景，我覺得在開發過程中分離 HTML、JS 和 CSS 真的很有幫助。 然而，上述文章的作者有不同的看法。 但是，這個選項應該留給開發人員，這樣至少在開發過程中，如果他願意的話，他可以分離 HTML、JS 和 CSS。
除了模塊化之外，進行分離將有助於能夠在其他任何地方重用這些資產。 所有這一切都失去了現有的意見。

他還說，

好吧，也許是時候升級一下游戲並使用像 Webpack 或 Browserify 這樣的合適的模塊捆綁器了。 如果您以前從未與他們打過交道，這似乎令人生畏，但相信我，邁出這一步是值得的。

但是這是什么意思？ 這是否意味着如果我們使用像 Webpack 或 Browserify 這樣的模塊捆綁器可以實現這一點？ 如果是，如何？

說了這么多，有沒有辦法做到這一點？

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 分離到單獨的文件中來利用其熱重載和預編譯功能

Answer 2

恕我直言，當您接近一個新框架時，您通常需要將其他框架的約定拋在腦后。 例如，試圖將 Angular風格硬塞到 Vue 項目中可能會導致更多痛苦，並限制新框架的好處。 React、Aurelia、Ember 等也是如此。它們都以自己的方式做事，出於多種原因，最好遵循它們的約定。

回答您的問題：例如，我沒有找到一種方法來拆分我同意會很好的文件；

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

我最近對​​Vue的研究發現，將相關元素組合到單個*.vue文件中會給你帶來封裝的好處。 但良好封裝的權衡通常是重復。 您需要決定什么是最適合您的模式 -不要重復自己或單一責任？

我還發現我可以將嵌入式 Vue 腳本和內聯代碼用於簡單的示例，但是一旦我轉移到*.vue文件，我就需要考慮使用模塊捆綁器。 一旦這一點變得明顯，vue 的簡單性（從表面上看是主要的賣點）就失去了一點。

Answer 3

在我看來，組件確實會變得很長，並且為了導航目的而將 HTML、CSS 和 JS 分開是有益的。 懷疑者可能會指出，這表明你的組件應該被分解成更小的部分，也許這是真的，但無論如何。

這就是你可以做到的。

Vue 支持“混合”。 這允許您將幾乎所有的 JS 移動到一個 mixin 文件中，並且它將被繼承到組件中。 此時留在組件文件中的實際 JS 代碼非常少（僅定義 mixin 的約 4 行）。

然后，您可以將 CSS 移動到使用 @import 拉入的外部文件中。我認為您可能會失去使用“作用域”的能力。

此時，您的組件文件僅包含 99% 的 HTML。

Answer 4

坦率地說，我認為想要單個文件組件的人從未真正為業務線應用程序編寫過前端。 我們的表單有時可以在屏幕上跨越 20-30 行，從而生成一個包含大約 100 個自定義組件的 html 模板。

來回滾動對於此類組件來說簡直就是地獄。 我也沒有真正看到將表單切割成子組件的明智方法。

我的工作流程是在一台顯示器上並排放置 javascript 和相關的視圖模板，在另一台顯示器上放置我的瀏覽器和瀏覽器開發面板。 這似乎效果很好。 我無法理解某些人的固執。 我正在研究 Vue.js 作為我們當前過時的 CanJS 實現的替代方案，但這是一個主要的威懾。