„Nuxt weigert sich, meine benutzerdefinierte Vue-Komponentenbibliothek (vuecli) zu erkennen, mit der Fehlermeldung „Die Deklarationsdatei des Moduls kann nicht gefunden werden.''

Question

Ich habe eine kleine Vue-Komponentenbibliothek mit dem in diesem Tutorial erstellten VueCLI-Projekt erstellt: https://javascript.plainenglish.io/how-to-create-test-bundle-vue-components-library-8c4828ab7b00

Komponentenbibliothek

Das VueCLI-Projekt wird mit Typescript eingerichtet und enthält daher mehrere *.d.ts Dateien:

// 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;
}

In meiner index.ts-Datei exportiere ich alles

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

export {
  ATag,
  AnotherThing,
  ...
};

und meine package.json-Datei:

{
  "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/*"
  ]
}

Das Build-Skript generiert mehrere JS-Dateien, eine CSS-Datei und einen Ordner zum Packen von Bildern.

Mein Nuxt-Projekt ist nur ein Standardprojekt, ich habe die Komponentenbibliothek per SSH von unserem Bit-Bucket-Konto importiert:

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

Wo immer ich versuche, meine Komponente zu importieren (downstream, in meiner Nuxt-App), so:

pages/Index.vue

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

Ich erhalte diese Fehlermeldung:

Deklarationsdatei für Modul „my-ui-components“, das implizit den Typ „any“ hat, nicht gefunden

„ATag.vue“ ist wirklich nichts Besonderes:

<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>

Was übersehe ich also? Dies wird meine erste Erfahrung mit Typoskript sein, daher kenne ich die Details nicht.

Ich denke, die Deklarationsdatei des Upstreams (UI-Components-Bibliothek) wird im Build-Prozess nicht verwendet, oder es liegt ein Problem mit Nuxt vor.

Answer 1

我认为这是因为你的导出方式。通常我在index.ts中编写导出语句如下

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