vue.js - 如何创建导入另一个组件的 Vue 包

Question

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

<!-- 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 添加...”之后)

<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>

这就是我在页面上看到的:
测试部分
父组件
结束测试部分

以下是我所知道的一些事情:

ParentComponent 到 ChildComponent 的导入路径是正确的。如果我故意将路径更改为不存在的内容，则在我尝试构建时会出错。

如果我直接在应用程序中导入和使用 ChildElement，它会按预期工作。

如果我将 ParentComponent 和 ChildComponent 复制到应用程序结构中，然后以这种方式导入它们(而不是从包中导入它们)，那么 ParentComponent 就会完全按照我期望的方式显示 ChildComponent。

我看到其他软件包似乎以这种方式导入组件，所以我认为我正在做的事情是可能的。
如果有人有任何想法，我将不胜感激!
(如果我包含项目中的更多代码，请告诉我是否会有所帮助)
更新
我已经追踪了更多。当我包含子组件时，我从应用程序收到此警告:

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

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

Answer 1

经过一些相当详尽的谷歌搜索和实验后，我相信您看到的问题更多地在于从本地文件夹(预先发布到 npm 或未从 npm 添加)与通过 npm 添加的包或纱。
解决这个问题的最大线索是 Vue 的两个实例，它触发了更新中的错误。

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

消除该错误本身并没有多大帮助，但是，由于两个 Vue 实例(就像您提到的发现)而发生的信息是关键。这似乎发生在 npm 包的本地实现中。因此，解决方案是执行以下一项或多项操作:
A) 找到一个用于开发包的测试工作流程，它不需要您在传统意义上安装包，而是从位于测试区域之外的本地文件夹中导入它。或者，将您的测试/文档应用程序构建到您的包存储库中。通过这种方式，您可以正常构建，而不会对每个小的更改进行版本碰撞，并且只有在您真正准备好时才发布和碰撞版本。
然后，仅在发布每个新版本后，才作为单独的步骤，通过从已发布的 npm 源进行完整安装来测试包的使用情况。
B) 使用 npm pack 在本地发布您的文件或 yarn pack .这将创建一个 .tgz 文件。您可以通过从本地路径添加/安装它来在您的项目中使用它。 npm install local-path-to\your-cool-package.tgz或 yarn add local-path-to\your-cool-package.tgz .需要注意的是，对于您希望在测试应用程序中看到的每项更改，您都必须删除并重新安装它，指向新版本的凹凸，它将附加到您的文件名。 您不能简单地保存并发布到同一文件以查看更新。你必须碰撞每一个变化。
显然，这是一个有点笨拙的工作流程，但它确实有效。也许这可能是完全发布到 npm 以测试构建更改之间的中间步骤。但无论如何，对我来说，似乎没有亲自处理过很多包，A 的工作流程比 B 稍微好一点。
以下是一些相关文章，它们详细解释了使用 npm install/link/pack 的类似重复 Vue 以及它们对本地包的工作方式有何不同:
Bundling a plugin with Rollup but having duplicate Vue.js package imported in the client app's bundle (Nuxt)
Difference between npm link x and npm install /path/to/x