是否可以将组件的模板引用为 Vuejs 中的文件？

Question

我正在使用 Flask 和 Vuejs 开发一个 SPA。我发现 Vuejs 是非常轻量级的框架，所以我选择了它。但是现在我面临一个问题——我的 SPA 有几个页面，或者当点击不同的链接时可以相互替换的视图。我发现 Vue 组件可以做到这一点。

真的，我可以用

<router-view></router-view>

Vue 路由器完美运行。

但问题在于组件。通常在示例中我会看到类似的内容：

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

但它可能适用于非常小的应用程序。就我而言，我的模板是非常大且复杂的 html 布局，所以我希望它们与代码分开。理想情况下，它看起来像：

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>

希望对你有帮助。