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

我们正在尝试创建一个 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>

(编辑)这是我的索引.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>

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

测试科 父组件 结束测试部分

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

父组件到子组件的导入路径是正确的。如果我故意将路径更改为不存在的内容，则在尝试构建时会出错。
如果我直接在应用程序中导入和使用 ChildElement，它会按预期工作。
并将它们复制到应用程序结构中，然后以这种方式导入它们(而不是从包中导入它们)，那么父组件完全按照我期望的方式显示子组件。

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

我将不胜感激任何人的任何想法！

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

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

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

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

经过一些相当详尽的谷歌搜索和实验，我相信你看到的问题必须更多地涉及从本地文件夹添加时导入的包(预发布到 npm 或不是从 npm 添加)与通过 npm 或 yarn 添加的包时的工作方式。

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

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

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

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

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

B) 使用npm pack或yarn pack在本地发布您的文件。这将创建一个.tgz文件。您可以通过从本地路径添加/安装它在项目中使用它。npm install local-path-toyour-cool-package.tgz或yarn add local-path-toyour-cool-package.tgz.这需要注意的是，对于您希望在测试应用程序中看到的每个更改，您都必须删除并重新安装它，指向它将附加到您的文件名的新版本凸起。您不能简单地保存并发布到同一文件以查看更新。你必须碰到每一个变化。

显然，这是一个有点笨拙的工作流程，但它有效。也许这可能是完全发布到 npm 以测试构建更改之间的中间步骤。但在我看来，无论如何，我个人并没有在包上做过太多工作，A 的工作流程比 B 稍微好一点。

这里有一些相关的帖子，解释了更多关于类似重复 Vue 与 npm install/link/pack 的信息，以及它们在本地软件包中的工作方式如何不同：

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

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

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

此外，这种扁平的进口看起来很奇怪import { ParentComponent, ChildComponent } from ...;如果已在父组件中导入了子组件，则无需再次导入。

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

import ParentComponent from './components';

export default ParentComponent;

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

相关内容

最新更新

热门标签：