如果我的 .vue 文件都是一样的，我怎样才能避免重复？

Question

我是 Vue 的新手，我喜欢它的很多地方，但我不喜欢将我的模板、脚本和样式都放在同一个文件中。

相反，我宁愿通过以下方式来解决问题：

<template src="./template.html"></template>
<script lang="ts" src="./script.ts"></script>
<style lang="scss" scoped src="./style.scss"></style>

因此，每个组件的目录如下所示

但是，如果我这样做，那么在我看来应该有一种方法可以使 .vue 文件本身完全不需要。

应该有一种方法告诉我的构建工具，如果它正在寻找 x/x.vue 并且找不到这个文件，只需用上面的代码填补空白。

在不对这种方法的优缺点进行任何辩论的情况下，我该怎么做？

无论如何，我正在使用 vue 版本 3.9.3 并准备将 necessary/desirable 的任何 npm 依赖项添加到项目中。

需要说明的是，虽然我也愿意修改我的导入语句，但这不是我的目标。我的目标是消除创建和维护预期完全相同的 .vue 文件的需要。（理想的解决方案应该使用该文件，如果它恰好存在，以防出于任何原因，我们想要以不同的方式构建该组件。）

更明确地说，我不是在寻找会改变我的组件架构的解决方案。我正在寻找一种元编程解决方案，它将填充可以隐含存在的代码，而无需任何人编写潜在的数百个相同的实现。

Answer 1

我建议一个解决方案是创建一个组件名称如 ProductForm 的文件夹，并在其中添加三个文件（模板、脚本和样式）并添加另一个应称为 index.js 你把

放在哪里

  <template src="./template.html"></template>
  <script lang="ts" src="./script.ts"></script>
  <style lang="scss" scoped src="./style.scss"></style>

使用组件像这样导入它：

  import ProductForm from './components/ProductForm'

这会自动加载 index.js 文件，而不会在导入语句中提及它。

Answer 2

有一个包通过利用 webpack 将单独的文件编译成单个 Vue 组件来执行类似于您想要实现的操作：https://github.com/pksunkara/vue-builder-webpack-plugin

我通常做的是使用 .vue 文件来定义 <template> 并加载所需的 .js 或 .css/.scss 文件。通过这种方式，我将它减少到只有三个文件，并且通过在一个文件中混合两个职责仍然没有太多重复：模板化和导入

<template>
   <p>Some code here</p>
</template>

<script src="./path_to_script.js"></script>
<style src="./path_to_styles.css"></style>

If my .vue files are all the same, how can I avoid repetition?