如何创建导入另一个组件的 Vue 包

Question

我们正在尝试创建一个 Vue npm 包，其中一个组件导入另一个组件（一个简单的例子可能是 - 该包包含一个通用按钮组件，以及一个使用我的按钮组件进行分页的 table 组件).我可以将子组件导入父组件并成功构建包。但是当我在应用程序中导入并使用父组件（从包中）时，子组件内容不显示。跳过它就像它不存在一样。

我很茫然

我正在使用一些非常简单的组件进行测试：

<!-- Child Component -->
<template>
    <div id="childElement">Child Component</div>
</template>

<script>
    export default {
        name: "childComponent"
    }
</script>

<style>
    #childElement {
        font-weight: bold;
    }
</style>

<!-- Parent Component -->
<template>
    <div>
        <div id="parentElement">Parent Component</div>
        <child-component></child-component>
    </div>
</template>

<script>
    import ChildComponent from "./ChildComponent.vue";

    export default {
        name: "parentComponent",
        components: {
            ChildComponent
        }
    }
</script>

<style>
    #parentElement {
        font-weight: bold;
    }
</style>

（编辑）这是我的 index.js 文件

import ParentComponent from './components/ParentComponent.vue';
import ChildComponent from './components/ChildComponent.vue';

const install = Vue => {
  Vue.component("ParentComponent", ParentComponent);
  Vue.component("ChildComponent", ChildComponent);
};

export default {
  install
};

export { ParentComponent, ChildComponent };

用法（在不同的应用程序中，在“yarn add ...”之后）

<template>
  <div>
    <div>
      <h1>Testing Section</h1>
      <parent-component></parent-component>
      <h1>End Testing Section</h1>
    </div>
  </div>
</template>

<script>
  import { ParentComponent, ChildComponent } from ...;

  export default {
    name: 'TestApp',
    components: {
      ParentComponent,
      ChildComponent
    }
  };
</script>

这是我在页面上看到的：

Testing Section
Parent Component
End Testing Section

以下是我知道的一些事情：

ParentComponent中导入ChildComponent的路径正确。如果我故意将路径更改为不存在的路径，则在我尝试构建时会出错。
如果我直接在应用程序中导入和使用 ChildElement，它会按预期工作。
如果我获取 ParentComponent 和 ChildComponent 并将它们复制到应用程序结构中，然后以这种方式导入它们（而不是从包中导入它们），那么 ParentComponent 将完全按照我期望的方式显示 ChildComponent。

我看到其他软件包似乎以这种方式导入组件，所以我认为我正在做的事情是可行的。

如果有人有任何想法，我将不胜感激！

（让我知道如果我包含项目中的更多代码是否有帮助）

更新我已经对此进行了更多追踪。当我包含子组件时，我从应用程序收到此警告：

[Vue warn]: resolveComponent can only be used in render() or setup().

这帮助我在互联网上找到了其他资源，但没有任何帮助。我的简单测试并未在任何地方明确使用 resolveComponent。如果我确实使用它和渲染函数而不是模板，同样的结果，同样的警告。

Answer 1

首先，您应该检查您的控制台是否有任何错误。

这个平面导入看起来也很奇怪 import { ParentComponent, ChildComponent } from ...; 如果您已经在Parent中导入了子组件，则无需再次导入。

我不知道你的 index.js 包裹里有什么。但我可以推荐它是这样的：

import ParentComponent from './components';
 
export default ParentComponent;

那么，你可以这样使用： import ParentComponent from 'NameOfYourNpmPackage'

Answer 2

经过一些相当详尽的谷歌搜索和实验后，我相信您看到的问题更多地与从本地文件夹（预发布到 npm 或未从 npm 添加）添加时导入包的工作方式有关通过 npm 或 yarn 添加。

解决这个问题的最大线索是 Vue 的两个实例，它们触发了更新错误。

[Vue warn]: resolveComponent can only be used in render() or setup().

运行那个错误本身并没有太大帮助，但是，由于两个 Vue 实例（就像你也提到的发现）而发生的信息是关键。这似乎发生在 npm 包的本地实现中。所以解决方案是执行以下一项或多项操作：

A) 找到一个用于开发包的测试工作流程，它不需要您以传统方式安装包，而是从位于测试区域之外的本地文件夹导入它。或者，将您的 testing/docs 应用程序构建到您的软件包存储库中。通过这种方式，您可以正常构建，而不会对每个小的更改进行版本更新，并且仅在您真正准备好时才发布和更新版本。

然后仅在发布每个新版本后作为单独的步骤从已发布的 npm 源进行完整安装来测试包的使用情况。

B) 使用 npm pack 或 yarn pack 在本地发布您的文件。这将创建一个 .tgz 文件。您可以通过 adding/installing 从本地路径在您的项目中使用它。 npm install local-path-to\your-cool-package.tgz 或 yarn add local-path-to\your-cool-package.tgz。随之而来的警告是，对于您希望在测试应用程序中看到的每个更改，您都必须删除并重新安装它，指向它将附加到您的文件名的新版本 bump。 您不能简单地保存并发布到同一个文件来查看更新。你必须突破每一个变化。

显然，这是一个有点笨拙的工作流程，但它确实有效。也许这可能是完全发布到 npm 以测试构建更改之间的中间步骤。但无论如何，对我来说，个人并没有太多地处理包，A 的工作流程比 B 稍微好一些。

这里有一些相关的帖子，更多地解释了类似的重复 Vue 与 npm install/link/pack 以及它们对本地包的工作方式有何不同：

如何创建导入另一个组件的 Vue 包

How to create Vue package that imports another component

vue.js

vue-component

vuejs3

npm-package