Question

基本更新已添加到底部-与Bootstrap无关，没有其他组件知道

我正在构建组件库。许多组件都包含Bootstrap Vue组件。

顶级导出是一个Vue插件，它use个其他Vue插件。

我正在全局添加所有Bootstrap组件，我的组件也将全局添加。例如，我的m-button从Bootstrap中包装了b-button。

在开发模式下，这可以正常工作。

然后我将其捆绑为commonjs模块，并将该库包含在另一个项目中。

导出的插件首先使用Bootstrap，然后包含我自己的所有组件。

从外部，我都可以使用m组件和b组件，因为它们都已添加。

但是，每当我的任何m组件包装一个b组件时，对b-button的引用都无法正确解析，并且我得到了出现以下错误：

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

found in

---> <MButton>
       <App> at src/App.vue
         <Root>

让我感到困惑的是，所有内容都可以从外部进行注册并可以从外部获得，并且在创建模块时也处于开发模式-导出时不在m和b之间。

顶级导出

这是主要出口商品。

import { VueConstructor, PluginObject, PluginFunction } from 'vue';
import customBootstrap from './builds/customBootstrap';
import globalComponents from './builds/globalComponents';

const plugin: PluginObject = {
    install(vue: VueConstructor): void {
        vue.config.productionTip = false;

        vue.use(customBootstrap);
        vue.use(globalComponents);
    },
};

export default plugin;

customBootstrap

此插件注册了Bootstrap，它将全局所有Bootstrap组件添加为b-<component>。

import { VueConstructor } from 'vue';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import '../assets/scss/app.scss';

const plugin = {
    install(vue: VueConstructor): void {
        vue.use(BootstrapVue);
    },
};

export default plugin;

globalComponents

此插件在全局注册我自己的组件。

import { VueConstructor } from 'vue';
import _ from 'lodash';
const requireComponent = require.context('../components', true, /\w+\.(vue|js)$/);

const plugin = {
    install(vue: VueConstructor): void {
        requireComponent.keys().forEach((filename) => {
            const componentConfig = requireComponent(filename);
            const componentName = 'n-' + _.kebabCase(filename.replace(/^\.\/(.*)\.\w+$/, '$1'));
            vue.component(componentName, componentConfig.default || componentConfig);
        });
    },
};

export default plugin;

编辑：现在很清楚，m-button在何时以及仅当从外部使用时不了解任何其他组件。模块组件）。我已经通过this.$options.components进行了检查。这让我怀疑它所知道的Vue实例是否与调用它的实例有所不同。

编辑2 ：问题与我自己的vs Bootstrap组件根本无关。实际上，即使在插件注册期间将所有组件全部添加到全局中，也没有任何组件知道其他组件。

导出后组件彼此不认识

顶级导出

customBootstrap

globalComponents

0 个答案: