typescript - [Vue 警告] : Failed to mount component: template or render function not defined. -vue-simple-uploader

Question

我的组件如下所示。

<template>
            <uploader class="uploader-example">
                <uploader-unsupport></uploader-unsupport>
                <uploader-drop>
                    <p>Drop files here to upload or</p>
                    <uploader-btn>select files</uploader-btn>
                    <uploader-btn :directory="true">select folder</uploader-btn>
                </uploader-drop>
                <uploader-list></uploader-list>
            </uploader>

</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import uploader from 'vue-simple-uploader';
    @Component({
        components: {
            Uploader: uploader,
        },
    })
    export default class In extends Vue {

    }
</script>

我的 shims-vue.d.ts 文件如下所示:

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare module 'vue-simple-uploader';

使用上面的代码我得到以下错误:

[Vue warn]: 挂载组件失败:未定义模板或渲染函数。

而且 uploader 组件也没有被渲染。

我使用了下面的包。

https://github.com/simple-uploader/vue-uploader

Answer 1

你绑定(bind)的库不正确——它写成 Vue plugin ，而不是作为一个独立的组件。

the project readme 中概述了正确的用法:

// main.ts
import Vue from 'vue'
import uploader from 'vue-simple-uploader'

Vue.use(uploader)

不需要进一步导入作为子组件，因为它已在全局注册。这不是好的做法，但这就是组件的编写方式。