如何创建导入另一个组件的 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 或添加的包时的工作方式有关。纱。

弄清楚这一点的最大线索是 Vue 的两个实例，它们会在更新中触发错误。

[Vue警告]：resolveComponent只能在render()或setup()中使用。

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

A) 找到一个用于开发包的测试工作流程，该工作流程不需要您以传统意义上安装包，而是从位于测试区域之外的本地文件夹导入它。或者，将您的测试/文档应用程序构建到您的软件包存储库中。这样，您就可以正常构建，而无需对每一个微小的更改进行版本碰撞，并且只有在真正准备好时才发布和碰撞版本。

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

npm packB) 使用或在本地发布您的文件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 以及它们对于本地包的工作方式有何不同：

使用 Rollup 捆绑插件，但在客户端应用程序的捆绑包中导入重复的 Vue.js 包 (Nuxt)

npm link x和之间的区别npm install /path/to/x