是否可以在Vuejs中引用組件模板作為文件？

Question

我正在使用Flask和Vuejs開發SPA。 我發現Vuejs框架非常輕巧，所以我選擇了它。 但是現在我遇到了一個問題-我的SPA有多個頁面，或者單擊不同的鏈接時可以相互替換的視圖。 我發現Vue組件可以做到這一點。

真的，我可以用

<router-view></router-view>

Vue路由器運行完美。

但是問題出在組件上。 通常在示例中，我會看到類似的內容：

const User = {
  template: '<div>User</div>'
}

但它可能適用於非常小的應用程序。 在我的情況下，我的模板很大而且很復雜，因此我希望它們與代碼分開。 理想的情況是：

const User = {
  templatePath: 'user.html'
}

但我不知道如何實現它。 以前我使用過AngularJS，但獲得它非常方便且容易，但現在還不行。

注意：除了Python和JavaScript，我不應該使用Node.js，webpack或其他任何東西。

Answer 1

不能。您不能告訴vuejs在運行時使用templateUrl屬性加載templateUrl 。

VueJS 文件說

考慮組件而不是模板

因此，請考慮組件，並將大型模板/邏輯拆分為較小的組件，這應該可以解決問題。

如果您仍然不確定，您可以做一件事。

將組件的js和css部分分離到各自的文件中。 現在，您的組件將僅具有html和js / css文件標簽。 像下面這樣

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

希望對您有幫助。