Typescript 在App.vue中注册导航栏组件时出现问题

尝试创建存在于我的Vue应用程序中的导航栏。来自react，所以我尝试将导航组件导入main.ts，并在App.vue中的路由器出口上方使用它。应用程序是使用带有typescript和Router的vue cli生成的

我已尝试使用

Vue.extend

，

@component

，

导出默认值{*/options*/}

编写导航组件

我尝试在App.vue中添加一个脚本标记，在其中注册导航组件

我已经在main.ts中导入并注册了导航组件

Navigation.ts：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { store } from '@/store';

@Component({
    name: 'nav-component',
})
export default class Navigation extends Vue {}

Navigation.vue：

<template>
    <nav class="nav-header" >
        <div>
            <button class="switch-map">MAP</button>
        </div>
    </nav>
</template>

<script src='./Navigation.component.ts' ></script>
<style lang="scss" scoped src='./Navigation.scss' ></style>

App.vue：

<template>
  <div id="app">
    <nav-component></nav-component>
    <router-view/>
  </div>
</template>

预期：整个页面应用程序顶部的导航栏（目前我只有两条路线）

实际值：未知的自定义元素“”。你注册正确了吗？对于递归组件，请确保包含“name”选项

---

许多替代方案刚刚导致“未能装载组件：未定义模板或呈现函数”错误消息。有什么建议吗？谢谢你的帮助

看起来，您正在导入Navigation.component

import NavigationComponent from 
'@/components/Navigation/Navigation.component';

但您需要在此处导入Navigation.vue

import NavigationComponent from 
'@/components/Navigation/Navigation.vue';

---

看起来，您正在导入Navigation.component

import NavigationComponent from 
'@/components/Navigation/Navigation.component';

但您需要在此处导入Navigation.vue

import NavigationComponent from 
'@/components/Navigation/Navigation.vue';

---

nav组件

用于

App.vue

，但该文件没有

组件

声明。看起来您已经在

main.ts

中声明了它，但应该将其移动到实际使用该组件的

App.vue

中

App.vue：

<template>
  <div id="app">
    <nav-component></nav-component>
    <router-view/>
  </div>
</template>

从“@/components/Navigation/Navigation.component”导入NavigationComponent；
导出默认值{
名称：“应用程序”，
组成部分：{
“导航组件”：NavigationComponent
}
}

---

还要注意的是，

Navigation.vue

中的

标记丢失

lang=“ts”

nav component

用于

App.vue

，但该文件没有

组件的声明。看起来您已经在
main.ts
中声明了它，但应该将其移动到实际使用该组件的
App.vue
中

App.vue：

<template>
  <div id="app">
    <nav-component></nav-component>
    <router-view/>
  </div>
</template>


从“@/components/Navigation/Navigation.component”导入NavigationComponent；
导出默认值{
名称：“应用程序”，
组成部分：{
“导航组件”：NavigationComponent
}
}

还请注意，
Navigation.vue
中的
标记缺失
lang=“ts”

正如19日所说，
App.vue
中的
nav组件
未注册
您注册的组件在本地“main.ts”中：
如果要创建全局零部件，可以执行以下操作：

Vue.component('nav-component', NavigationComponent);

正如19日所说，
App.vue
中的
nav组件
未注册
您注册的组件在本地“main.ts”中：
如果要创建全局零部件，可以执行以下操作：

Vue.component('nav-component', NavigationComponent);

在
App.vue
中以以下方式导入导航组件：

import NavigationComponent from 
'@/components/Navigation/Navigation.vue';

 components: {NavigationComponent}

无需在
main.ts
中导入它，如果您在
App.vue
中导入并以这种方式使用它，导航组件将在整个应用程序中可用

<template>
  <div id="app">
    <navigation-component></navigation-component>
    <router-view/>
  </div>
</template>

在
App.vue
中以以下方式导入导航组件：

import NavigationComponent from 
'@/components/Navigation/Navigation.vue';

 components: {NavigationComponent}

无需在
main.ts
中导入它，如果您在
App.vue
中导入并以这种方式使用它，导航组件将在整个应用程序中可用

<template>
  <div id="app">
    <navigation-component></navigation-component>
    <router-view/>
  </div>
</template>

文件名为Navigation.component.ts。我有带src属性的脚本标记链接到TS文件。文件名是Navigation.component.TS。我有带src属性的脚本标记链接到TS文件。