“Nuxt 拒绝识别我的自定义 Vue (vuecli) 组件库，并显示错误消息‘找不到模块的声明文件’”
我使用本教程制作的 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;
}
我的index.ts文件是我导出所有内容的地方
import ATag from './components/ATag.vue';
import AnotherThing from './components/AnotherThing.vue';
...
export {
ATag,
AnotherThing,
...
};
和我的 package.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 文件和一个用于打包图像的文件夹。
我的 Nuxt 项目只是一个样板项目，我通过 ssh 从我们的位存储桶帐户导入组件库：
"dependencies": {
"my-ui-components": "git+ssh://git@bitbucket.org:my-account/my-ui-components.git",
}
无论我尝试导入我的组件（下游，在我的 Nuxt 应用程序中），如下所示：
pages/Index.vue
<script>
import { ATag, AnotherThing } from my-ui-components;
export default {
...
components: {
ATag,
}
...
}
</script>
我收到此错误：
找不到隐式具有“any”类型的模块“my-ui-components”的声明文件
“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-components 库）声明文件没有在构建过程中使用，或其 Nuxt 存在问题。
