[Vue warn]: не удалось смонтировать компонент: шаблон или функция визуализации не определены. -vue-простой загрузчик

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]: не удалось смонтировать компонент: шаблон или функция визуализации не определены.

, а также компонент загрузки не отображается.

Я использовал приведенный ниже пакет.

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

Answer 1

Вы неправильно связываете библиотеку - она ​​написана как Vue плагин , а не как отдельный компонент.

Правильное использование указано в readme * 1006 проекта*:

// 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,
    },
})