Nuxt 拒绝我的自定义 Vue (vuecli) 组件库"Could not find a declaration file for module"

Question

我用我使用本教程制作的VueCLI项目构建了一个小的Vue组件库:https://javascript.plainenglish.io/how-to-create-test-bundle-vue-components-library-8c4828ab7b00

组件库

VueCLI项目是用Typescript设置的，因此它附带了几个*.d.ts文件:

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

我的指数。ts文件是我导出所有

的地方。

import ATag from './components/ATag.vue';
import AnotherThing from './components/AnotherThing.vue';
...
export {
ATag,
AnotherThing,
...
};

和我的包。json文件:

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

构建脚本生成几个JS文件、一个CSS文件和一个用于打包图像的文件夹。

我的下一个项目只是一个样板项目，我通过ssh从我们的位桶帐户导入组件库:

"dependencies": {
"my-ui-components": "git+ssh://[e-mail]:my-account/my-ui-components.git",
}

和我试图导入组件的地方(下游，在我的next应用程序中)，像这样:

页面/Index.vue

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

我得到这个错误:

找不到模块"my-ui-components"的声明文件;隐式地有一个'any'类型

和"ATag.vue"没有什么特别的吗?

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

那么我错过了什么呢?这将是我的第一个类型脚本的经验，所以我不知道这一切的来龙去脉。

我认为上游(ui组件库)声明文件没有在构建过程中使用，或者它的next有这个问题。

Answer 1

我认为是因为您的导出方式。通常我把导出语句写在索引中。

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

Answer 2

在next项目根目录中添加一个名为my-ui-components.d.ts的声明文件，其内容如下:

declare module 'my-ui-components'