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

Question

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

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

<template>
  ... 
</template>

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

<style scoped>
  ...
</style>

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

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

<template>
  ...
</template>

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

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

这很好用。现在只剩下 html 部分了。 还有办法提取这个吗？

为什么？

我喜欢清晰的代码分隔，这是在 my-component.vue 文件中将 'code-mixing' 保持在最低限度的唯一方法。

Answer 1

这里争论的焦点是什么是代码分离。 Vue 的作者认为将 HTML、CSS 和 JS 放在一个 .vue 文件中是将组件代码分离到它们自己的位置并将它们的相关代码放在一起，与 'separation of concerns'。此处的文档中简要讨论了它：

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

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

按预期使用 .vue 个文件。
使用 webpack 插件（在其他评论中提到）。
在不使用 .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 的世界，我觉得这有点奇怪，但我已经学会了喜欢它。

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

vue.js 2 - extract html snipped of single file component into standalone file

html

code-separation

vue.js

vue-component

vuejs2

为什么？