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

Question

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

我不知所措。

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

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

（编辑）这是我的索引。js文件

javascript prettyprint-override">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>

这就是我在页面上看到的：

Testing Section
Parent Component
End Testing Section

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

• 家长组件到ChildComponent中的导入路径是正确的。如果我有目的地将路径更改为不存在的东西，它会在我尝试构建时出错。
• 如果我直接在应用程序中导入和使用ChildElement，它会按预期工作。
• 如果我将家长组件和ChildComponent复制到应用程序结构中，然后以这种方式导入它们（而不是从包中导入它们），那么家长组件会以我期望的方式显示ChildComponent。

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

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

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

更新我已经找到了更多。当我包含子组件时，我从应用程序中得到以下警告：

[Vue warn]：resolveComponent只能在render（）或setup（）中使用。

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

Answer 1

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

此外，这个平面导入看起来很奇怪，import{ParentComponent，ChildComponent}from 如果已在父组件中导入子组件，则无需再次导入。

我不知道你的索引里有什么。js，你的软件包。但我可以推荐如下：

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

然后，您可以这样使用它：从'NameOfYourNpmPackage'导入家长组件

Answer 2

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

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

[Vue warn]：resolveComponent只能在render（）或setup（）中使用。

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

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

然后，只有在发布每个新版本后，才能作为一个单独的步骤，从发布的npm源进行完整安装，以测试软件包的使用情况。

B） 使用npm-pack或warn-pack本地发布文件。这将创建一个。tgz文件。通过从本地路径添加/安装它，可以在项目中使用它<代码>npm安装本地路径到\您的酷软件包。tgz或向酷包添加本地路径。tgz。这附带了一条警告：对于您希望在测试应用程序中看到的每一个更改，您都必须删除并重新安装它，指向它将附加到您的文件名中的新版本。您不能简单地保存并发布到同一个文件以查看更新。每次换衣服你都得碰运气。

显然，这是一个有点笨重的工作流程，但它是有效的。也许这可能是在向npm完全发布以测试构建更改之间的中间步骤。但对我来说，似乎A的工作流程比B的好一点，因为我个人并没有在软件包方面做过很多工作。

以下是一些相关的帖子，解释了更多关于使用npm install/link/pack的类似重复Vue以及它们如何以不同的方式为本地包工作：

将插件与Rollup绑定，但具有重复的Vue。在客户端应用程序包（Nuxt）中导入的js包

npm link x和npm install/path/to/x