"Nuxt enggan mengenali perpustakaan komponen Vue (vuecli) tersuai saya dengan mesej ralat 'Tidak dapat mencari fail pengisytiharan modul'"

Question

Saya membina perpustakaan komponen Vue kecil menggunakan projek VueCLI yang dibuat dalam tutorial ini: https://javascript.plainenglish.io/how-to-create-test-bundle-vue-components-library-8c4828ab7b00

Perpustakaan komponen

Projek VueCLI disediakan menggunakan Typescript dan oleh itu disertakan dengan beberapa *.d.ts fail:

// shims-tsx.d.ts
import Vue, { VNode } from 'vue';

declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

// shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';

  export default Vue;
}

Fail index.ts saya ialah tempat saya mengeksport segala-galanya

import ATag from './components/ATag.vue';
import AnotherThing from './components/AnotherThing.vue';
...

export {
  ATag,
  AnotherThing,
  ...
};

dan fail package.json saya:

{
  "name": "my-ui-components",
  "scripts": {
    "build": "vue-cli-service build --target lib --name my-ui-components ./src/index.ts",
  },
  "main": "./dist/my-ui-components.common.js",
  "files": [
    "dist/*"
  ]
}

Skrip binaan akan menjana beberapa fail JS, fail CSS dan folder untuk imej pembungkusan.

Projek Nuxt saya hanyalah projek boilerplate, saya mengimport perpustakaan komponen melalui ssh dari akaun baldi bit kami:

"dependencies": {
  "my-ui-components": "git+ssh://git@bitbucket.org:my-account/my-ui-components.git",
}

Di mana sahaja saya cuba mengimport komponen saya (hiliran, dalam apl Nuxt saya) seperti ini:

halaman/Index.vue

<script>
import { ATag, AnotherThing } from my-ui-components;
export default {
...
components: {
ATag,
}
...
}
</script>

Saya mendapat ralat ini:

Fail pengisytiharan tidak ditemui untuk modul 'my-ui-components' yang secara tersirat mempunyai jenis 'mana-mana'

"ATag.vue" sememangnya tiada yang istimewa:

<template>
  <span :class="classes"><slot /></span>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'a-tag',
  props: {
    type: {
      type: String,
      validator(value) {
        return ['is-primary', 'is-success', 'is-warning', 'is-danger'].includes(value);
      },
    },
    shade: {
      type: String,
      validator(value) {
        return ['is-light', 'is-normal'].includes(value);
      },
    },
    size: {
      type: String,
      default: 'is-normal',
      validator(value) {
        return ['is-normal', 'is-medium', 'is-large'].includes(value);
      },
    },
    rounded: {
      type: Boolean,
      default: false,
    },
    naked: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    classes() : object {
      return {
        tag: true,
        [`${this.type}`]: this.type,
        [`${this.shade}`]: this.shade,
        [`${this.size}`]: this.size,
        'is-rounded': this.rounded,
        'is-naked': this.naked,
      };
    },
  },
});
</script>

Jadi apa yang saya hilang? Ini akan menjadi pengalaman pertama saya dengan skrip taip, jadi saya tidak tahu butirannya.

Saya rasa fail pengisytiharan huluan (pustaka komponen ui) tidak digunakan dalam proses binaan, atau terdapat masalah dengan Nuxtnya.

Answer 1

Saya rasa ia adalah kerana cara anda mengeksport. Biasanya saya menulis pernyataan eksport dalam index.ts seperti berikut

export ATag from './components/ATag.vue';
export AnotherThing from './components/AnotherThing.vue';