无法从 npm 包中导入 vue 组件

Posted

技术标签:

【中文标题】无法从 npm 包中导入 vue 组件【英文标题】:can't import vue component from npm package 【发布时间】: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 非常感谢,我现在觉得自己很愚蠢。我没有正确注册组件。 【参考方案1】:

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

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

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

【讨论】:

以上是关于无法从 npm 包中导入 vue 组件的主要内容,如果未能解决你的问题,请参考以下文章

如何在 vue 3 (Danfo.js) 中导入 NPM 包

在 Nativescript Playground 中导入 npm 包

如何从 typescript 项目中导入 npm 包?

无法在 jest vue 中导入 graphql 查询文件

VUE - 未找到模块。无法导入组件

如何在vue.js项目的main.js文件中导入js类并在所有组件中使用它而不是在每个组件中导入?