使用带有打字稿的 vue 进行渲染时出现“未知的自定义元素”答案

【问题标题】：Got “Unknown custom element” while rendering using vue with typescript使用带有打字稿的 vue 进行渲染时出现“未知的自定义元素”
【发布时间】：2018-01-01 10:51:08
【问题描述】：

目前的做法是这样的：首先在 'src' 文件夹下放一个 'modules.d.ts' 文件来定义 vue 模块：

// modules.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

并在我的components文件夹下写一个index.ts文件，用于导入所有组件并在任何地方使用它们：

// components/index.ts
import App from './app/app.vue';
import Pager from './pager/pager.vue';

export { App, Pager };

最后在使用vue-class-component的@Component注册子组件：

// components/app/app.ts
import { Pager } from '@/components';
@Component({
    components: {
        'pager': Pager
    }
})
export default class App extends Vue {

}

但是子组件没有被渲染并在控制台中出现这个错误：

[Vue warn]: Unknown custom element: <pager> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

如果我直接导入 vue 文件就可以了：

// components/app/app.ts
//import { Pager } from '@/components';
import Pager from '@/components/pager/pager.vue';
@Component({
    components: {
        'pager': Pager
    }
})
export default class App extends Vue {

}

谁能告诉我哪里错了，正确的方法是什么？

文件夹结构：

.
`-- src
    |-- components
    |   |-- app
    |   |   |-- app.css
    |   |   |-- app.ts
    |   |   `-- app.vue
    |   |-- index.ts
    |   `-- pager
    |       |-- pager.css
    |       |-- pager.ts
    |       `-- pager.vue
    `-- modules.d.ts

【问题讨论】：

我认为这只是一个错字！使用Components: { Pager }（如果我没记错的话）
@Kokodoko 你的意思是：@Component({ components: { Pager }})？我试过了，但还是不行。不熟悉这个编辑器，所以多次编辑我的评论，如果打扰到您，请见谅。
是的，我就是这样使用它的。此外，如果导出默认类可以使用import Pager from ...，如果不使用default 关键字，则必须使用import {Pager} from ... 导入。例如export default class Pager extends Vue
@Kokodoko 我想做的是将所有组件导入一个文件（components/index.ts）并再次导出它们，这样我就可以从这个文件导入组件而不是导入它的 .vue 文件.而且我确实在我的 .ts 文件中使用了 default 关键字，但我认为这没什么。
啊，我明白你的意思了。但是，如果您想注册组件以便能够在任何地方使用它们，您可能会考虑在全局而不是本地注册它们。 Vue.component('pager', Pager)

标签： typescript vue.js

【解决方案1】：

只需更改组件的注册方式即可。改变

@Component({
    components: {
        'pager': Pager
    }
})

进入

@Component({
    components: {
        'pager': () => Promise.resolve(Pager)
    }
})

【讨论】：

@aviau 不确定，猜它与异步组件或其他有关。

【解决方案2】：

这是一个有趣的，将 index.ts 移动到上层目录（在 /src 下）应该可以工作。

【讨论】：

忘记更新了。只需更改组件的注册方式即可。稍后我会回答这个问题。