如何创建导入另一个组件的 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 };

用法（在不同的应用程序中，在“添加纱线...”之后）

<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 警告]：resolveComponent 只能在 render() 或 setup() 中使用。

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

Answer 1

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

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

[Vue 警告]：resolveComponent 只能在 render() 或 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 稍微好一些。

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

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

Answer 2

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

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

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

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

然后，您可以这样使用它： import ParentComponent from 'NameOfYourNpmPackage'