0

我有一个 Vue.js 应用程序 (m4ops)，并且正在开发一个公共 Vue.js 包 ( vfg-display-fields ) 作为其中的一部分。由于它是一个树形结构，包有一对循环引用的组件。我已经使用Vue.js Guide中的方法解决了这个问题。

在我的 vfg-display-fields 包中，这两种方法都可以很好地工作。当我发布包并将其导入我的主 m4ops 包时，它也可以使用任何一种方法正常工作。

当我尝试在 CodeSandbox 中展示包时出现问题（请参阅https://codesandbox.io/s/ykpj1jpxvv）。

使用我使用的第一个建议方法

beforeCreate() {
  this.$options.components['vfg-display-fields'] = require('./DisplayFields.vue').default;
},

在 CodeSandbox 我得到错误：

[Vue warn]: Unknown custom element: <vfg-display-fields> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

使用第二种方法

components: {
  'vfg-display-fields': () => import('./DisplayFields.vue'),
},

我得到错误

proxyConsole.js:72 [Vue warn]: Failed to resolve async component: function vfgDisplayFields() {
      return _promise.default.resolve().then(function () {
        return require("".concat(function () {
          return require('./DisplayFields.vue');
        }));
      });
    }
Reason: DependencyNotFoundError: Could not find dependency: 'function () {
          return require('.' relative to '/node_modules/vfg-display-fields/src/DisplayGroups.vue'

这只是我的第一个包，我对 Vue.js 非常陌生。我的包似乎在其预期位置（我的 m4ops 应用程序）中运行良好，但在 CodeSandbox 中却没有。这是我的错误还是 CodeSandbox 中的错误？

4

2 回答 2

0

在DisplayGroups.vue您vfg-display-fields通过自定义元素名称使用组件时，但该组件具有 name DisplayFields。根据有关Recursive Components的文档，组件的名称必须与Vue.component(...).
在src / DisplayFields.vue你必须写

export default {
  name: 'vfg-display-fields',
...

或在src / index.js注册时更改组件名称

Vue.component('display-fields', DisplayFields);

并且不要忘记更改元素名称src / DisplayGroups.vue：

<template>
  <div>
    <display-fields .../>
  </div>
</template>

希望这对您有所帮助。

于 2019-03-17T18:00:07.833 回答
0

根据这篇有用的帖子，我意识到问题在于我已将我的包发布为 ES6 代码，同时还使用了.vue文件。我应该将它们转换为 ES5 进行发布。

我还有很多东西要学。

于 2019-03-22T07:29:17.310 回答