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

Question

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

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

<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://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 世界，我觉得这有点奇怪，但我学会了喜欢它。