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>

这是我在页面上看到的：

Testing Section
Parent Component
End Testing Section

以下是我所知道的一些东西：

从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的好一些。

以下是一些相关的帖子，它们详细解释了使用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

Answer 2

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

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

我不知道您的包裹index.js中有什么。但我可以建议它像这样：

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

然后，您可以通过以下方式使用它： import ParentComponent from 'NameOfYourNpmPackage'

如何创建可导入其他组件的Vue软件包

2 个答案: