如何将 vue.js 模板分离到 .vue 文件中，同时将代码保留在 .js 中？

Posted 2023-02-22

【中文标题】如何将 vue.js 模板分离到 .vue 文件中，同时将代码保留在 .js 中？

【英文标题】：How to separate vue.js template into a .vue file while leaving code in .js?

【发布时间】：2018-10-09 19:53:34

【问题描述】：

我想将 vue.js 模板分离成一个 .vue 文件，同时将代码留在一个 .js 文件中。

这是一个vue“单文件组件”：

<template>
..
</template>

<script>
..
</script>

什么有效：

使 .vue 文件成为真正的组件，并定义一个指向 .js 文件的 MIXIN。 看起来很老套！

我想要什么：

单个 webpack 导入到 .js 文件：

...
</template>

import ViewModel from 'vm.js'

这可能吗？还是 vue-loader 理解的 .vue 文件中的标签？

<template>
..
<script src='vm.js'/>
</template>

---

非常感谢！目标是在 Visual Studio 代码中设置断点 + 关注点分离 + 可读性。 :)

哦，这需要使用 typescript！

【问题讨论】：

作为还在学习vue的人，据我了解vue需要将template/js放在一个文件中，才能编译成web使用的组件。但是，如果这实际上是可能的，我也想知道......

你不能把导入包在脚本标签中吗？

【参考方案1】：

...
</template>

import ViewModel from 'vm.js'

第二个选项可以稍作调整

<template>
...
</template>

<script src="vm.js"></script>

【讨论】：

好的，谢谢！如果可行，我会尝试并接受答案。 :)

typescript 怎么样...我现在正在努力将我们的 vue.js 代码库迁移到它。我只包含一个“vm.ts”吗？我不确定 webpack 和 vue-loader 是否聪明...

支持打字稿。不过，我还没有为我的项目尝试过。您可以查看vuejs.org/v2/guide/typescript.html

看起来我们可能需要添加：