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之类的属性来加载模板。

VueJS doc说

考虑组件而不是模板

因此，请考虑组件并将大型模板/逻辑拆分为较小的组件，这应该可以解决问题。

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

将组件的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>

希望它对您有帮助。

是否可以在Vuejs中引用组件模板作为文件？

1 个答案: