Блог

В настоящее время у меня возникла проблема с экспортом пользовательского компонента 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 папку, и компилятор кажется счастливым. Мне кажется, что что-то может быть не так с экспортом. Но я не уверен, какую часть я пропустил или сделал неправильно.

По-видимому, способ, которым я импортировал компонент Icon, был неправильным, и он должен быть похож

 import { Icon, IconModel } from '@ComponentLib/components';
 

А затем добавьте компонент значка в @Component({components: {Icon }}) декоратор.