[Vue 警告]：無法掛載組件：未定義模板或渲染函數。 -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 警告]：無法掛載組件：未定義模板或渲染函數。

並且上傳器組件也沒有被渲染。

我用過下面的包。

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

Answer 1

您錯誤地綁定了庫——它是作為Vue 插件編寫的，而不是作為獨立組件編寫的。

項目自述文件中概述了正確的用法：

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

Vue.use(uploader)

無需進一步導入作為子組件，因為它已在全球范圍內注冊。 這不是好的做法，但它是組件的編寫方式。

Answer 2

您忘記在 app.js 主文件中初始化上傳器：

import Vue from 'vue'
import uploader from 'vue-simple-uploader'
import App from './App.vue'

Vue.use(uploader)

或試試這個：

@Component({
    components: {
        uploader: uploader,
    },
})