vue组件抱怨导入答案

【问题标题】：vue component complains about importvue组件抱怨导入
【发布时间】：2022-01-06 12:24:12
【问题描述】：

我正在编写一个 vue 组件 NavItem，它表示导航中的 am 项。我还有一个用 TS 编写的 NavItemModel 类。但是当我尝试导入它时，vue 抱怨找不到模块：

项目结构

vue
./src
...../components
...../components/NavItem.vue
...../models
...../models/NavItemModel.ts

NavItem.vue

<template>
    <div>
        <a href="">{{content.title}}</a>
    </div>
</template>
<script>
import {NavItemModel}  from "../models/NavItemModel";
export default{
    name: 'NavItem',
    props:{
        content: NavItemModel
    },
    components:{
        
    }
}
</script>

NavItemModel.ts

export class NavItemModel{
    title:String;
    link: String;
    parentItem:NavItemModel;
    childItem:NavItemModel;
    constructor(title:String,link:String,parentItem:NavItemModel,childItem:NavItemModel){
        this.title = title;
        this.link = link;
        this.parentItem = parentItem;
        this.childItem = childItem;
    }
}

我哪里做错了？

【问题讨论】：

你能分享你的 webpack 配置吗？
@Terry 我没有 webpack 配置。我用vui ui来初始化项目
什么是 VUI？你是说 Vue CLI 吗？
@Terry jep 我的意思是 vue ui。 vue cli的ui工具
您是否使用启用了 TypeScript 的 Vue CLI 初始化了您的项目？如果没有，您可以通过 vue create /your/folder/path 简单地更新您的 Vue CLI 项目，或者简单地创建一个新项目并复制文件（但有丢失 git 提交历史的风险）

标签： typescript vue.js

【解决方案1】：

设置打字稿语言<script lang='ts'>

声明你的属性像

 props: {
  content: Object as () => NavItemModel
 }

【讨论】：

正确的类型是PropType<NavItemModel>。这不是函数
现在我收到此错误：11:24 错误解析错误：意外令牌，预期“，”

【解决方案2】：

如果我正确理解您的应用程序文件夹结构： /src /src/模型

你应该像这样导入它：

import {NavItemModel}  from "@/models/NavItemModel";

【讨论】：

【解决方案3】：

你不应该解构这个类。析构用于属性和函数

<template>
    <div>
        <a href="">{{content.title}}</a>
    </div>
</template>
<script>
import NavItemModel  from "../models/NavItemModel";
export default{
    name: 'NavItem',
    props:{
        content: NavItemModel
    },
    components:{
        
    }
}
</script>

【讨论】：

它需要被解构，因为 OP 没有使用export default class，而是使用命名导出。