在 Vuejs 项目中找不到导出的组件
Cannot find exported component in Vuejs project
我目前在从我的组件库包中导出自定义 Vue 组件时遇到问题。
比方说,ComponentLib
具有以下文件夹结构,其中我要导出的自定义组件称为 icon.vue
|-src
|-components
|-icon.vue
|-index.ts
|-package.json...and other config files
ComponetLib/src/components/icon.vue
<template functional>
...
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { IconModel } from '../index';
@Component({})
export default class IconComponent extends Vue {
@Prop()
icon!: IconModel;
}
</script>
ComponentLib/src/index.ts
export type IconModel = {
id: string;
content: string;
}
export { default as Icon } from 'components/icon.vue';
构建后,在这个 dist
文件夹中,我可以看到正在导出以下类型。
|-dist
|-...
|-types
|-components
|-icon.vue.d.ts
|-index.d.ts
|-package.json
dist/types/index.d.ts
export declare type IconModel = {
id: string;
content: string;
};
export { default as Icon } from 'components/icon.vue';
这是 MainProject
的结构
|-src
|-components
|-profile.vue --> imports @ComponentLib/components/icon.vue
|-index.ts
|-package.json...and other config files
profile.vue
通过
导入自定义 icon.vue
组件
import Icon from '@ComponentLib/types/components/icon.vue';
但是当我编译时,我得到一个错误 module not found
并且它无法解析这个引用。
但是当我将相同的组件放在 MainProject/src/components
文件夹中时,编译器似乎很高兴。我突然想到导出可能有问题。但是我不确定我错过或做错了哪一部分。
显然我导入图标组件的方式不正确,应该是这样的
import { Icon, IconModel } from '@ComponentLib/components';
然后将 Icon 组件添加到 @Component({components: {Icon }})
装饰器中。
我目前在从我的组件库包中导出自定义 Vue 组件时遇到问题。
比方说,ComponentLib
具有以下文件夹结构,其中我要导出的自定义组件称为 icon.vue
|-src
|-components
|-icon.vue
|-index.ts
|-package.json...and other config files
ComponetLib/src/components/icon.vue
<template functional>
...
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { IconModel } from '../index';
@Component({})
export default class IconComponent extends Vue {
@Prop()
icon!: IconModel;
}
</script>
ComponentLib/src/index.ts
export type IconModel = {
id: string;
content: string;
}
export { default as Icon } from 'components/icon.vue';
构建后,在这个 dist
文件夹中,我可以看到正在导出以下类型。
|-dist
|-...
|-types
|-components
|-icon.vue.d.ts
|-index.d.ts
|-package.json
dist/types/index.d.ts
export declare type IconModel = {
id: string;
content: string;
};
export { default as Icon } from 'components/icon.vue';
这是 MainProject
|-src
|-components
|-profile.vue --> imports @ComponentLib/components/icon.vue
|-index.ts
|-package.json...and other config files
profile.vue
通过
icon.vue
组件
import Icon from '@ComponentLib/types/components/icon.vue';
但是当我编译时,我得到一个错误 module not found
并且它无法解析这个引用。
但是当我将相同的组件放在 MainProject/src/components
文件夹中时,编译器似乎很高兴。我突然想到导出可能有问题。但是我不确定我错过或做错了哪一部分。
显然我导入图标组件的方式不正确,应该是这样的
import { Icon, IconModel } from '@ComponentLib/components';
然后将 Icon 组件添加到 @Component({components: {Icon }})
装饰器中。