vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

Question

我想知道是否有办法将单个文件组件文件拆分为多个较小的文件。

我在说什么？ 让我们看看这个：

<template>
  ... 
</template>

<script>
  export default {
    name: 'my-component',
  };
</script>

<style scoped>
  ...
</style>

这就是典型的 vue.js 单文件组件的构建方式。 如您所见，有一个html -section（ <template>标签的内容）、一个javascript -section（ <script>标签的内容）和一个css -section（ style标签的内容）。 我想知道是否可以将所有这些部分拆分为单个文件。 我们称它们为my-component.css 、 my-component.es6和my-component.html - 都“属于” my-component.vue 。

我设法将javascript和css样式提取到独立文件中，如下所示：

<template>
  ...
</template>

<script src="./my-component.es6"></script>

<style scoped>
  @import './my-component.css';
</style>

这工作得很好。 现在我只剩下html部分了。 有没有办法也提取这个？

为什么？

我喜欢清晰的代码分离，这是在my-component.vue文件中将“代码混合”保持在最低限度的唯一方法。

Answer 1

这里的论点是什么是代码分离。 Vue 的作者认为，在一个.vue文件中包含 HTML、CSS 和 JS 是将组件代码分离到它们自己的位置并将它们的相关代码保持在一起，并且与“关注点分离”无关。 在这里的文档中简要讨论了它：

https://v2.vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns 。

所以你有3种不同的选择：

1. 按预期使用.vue文件。
2. 使用 webpack 插件（在其他评论中提到）。
3. 在不使用.vue文件的情况下构建您的组件，但是您将失去在开发过程中热重载的能力，您将不得不使用html-loader插件。

HTML：

<div id="example">
  <my-component></my-component>
</div>

JS：

// register
Vue.component('my-component', {
  template: require('my-component.html');
})

// create a root instance
new Vue({
  el: '#example'
})

意见：只需使用.vue文件，如文档中所示。 它会更容易维护，更容易找到你的代码，而且你不必与 webpack 搏斗。 来自 Angular 世界，我觉得这有点奇怪，但我已经学会了喜欢它。