无法从 npm 包中导入 vue 组件答案

【问题标题】：can't import vue component from npm package无法从 npm 包中导入 vue 组件
【发布时间】：2018-02-23 11:41:52
【问题描述】：

早安，

我最近为一个导航栏创建了一个 npm 包，我想将它导入到我的主代码库中。我正在使用 vue @components，但我不太了解如何使用导入的组件。如果有人知道如何将 npm 打包的组件放入 dom 中，将不胜感激。

以下是我尝试过的简化示例：

npm package 

    import Vue from 'vue';
    import Component from 'vue-class-component';
    import '../navigation-bar.styles.less';
    @Component({template: require('../navigation-bar.html')}})
    export class NavigationBar extends Vue {
       constructor() {
        super();
                  }
    }
    Vue.component('navigation-bar', NavigationBar);

main.ts

    import { NavigationBar } from '@international-client/navigation-bar';
    Vue.component('navigation-bar', NavigationBar);

index.html
    <html>
        <head>
            <title>Game</title>
        </head>
        <navigation-bar></navigation-bar>
        <body class="game-view">
        </body>
    </html>

【问题讨论】：

错误是什么？你在哪里初始化vue？它附着在什么元素上？
没有错误，导航栏组件显示为。 navigation-bar.html 如下：

@FrankProvost
在哪里初始化 Vue 实例？
@FrankProvost 非常感谢，我现在觉得自己很愚蠢。我没有正确注册组件。

标签： javascript typescript npm webpack vue.js

【解决方案1】：

代表我犯了一个非常严重的错误：

如果您正确注册了组件，上述代码确实可以工作。

export function setupVM(): Vue {
    const vm = new Vue({
        el: '#navigation-bar',
        components: {
            navigationBar: NavigationBar
        }
    });
    return vm;
}

【讨论】：