[Vue 警告]:无法挂载组件:未定义模板或渲染函数。 -vue-simple-uploader

Posted

技术标签:

【中文标题】[Vue 警告]:无法挂载组件:未定义模板或渲染函数。 -vue-simple-uploader【英文标题】:[Vue warn]: Failed to mount component: template or render function not defined. -vue-simple-uploader 【发布时间】:2019-09-21 06:39:34 【问题描述】:

我的组件如下所示。

<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

【问题讨论】:

【参考方案1】:

您错误地绑定了库 - 它被写为 Vue plugin,而不是作为独立组件。

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

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

Vue.use(uploader)

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

【讨论】:

啊哈。到目前为止,我一直认为一切都是一个组成部分。我以为插件是过去式了(我刚刚看过有关插件的视频。现在我明白了。)由于这些知识,将您的答案标记为答案。 @AnonymousCreator Vue 插件很常见并且通常非常有用(例如,参见 Vuex 和 Vue-i18n),它们并不是包装独立组件的最佳方式。它有效,但它是一种反模式。 我也有同感。这应该是组件。感谢您提供更多资源。【参考方案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,
    ,
)

【讨论】:

以上是关于[Vue 警告]:无法挂载组件:未定义模板或渲染函数。 -vue-simple-uploader的主要内容,如果未能解决你的问题,请参考以下文章

[Vue 警告]:无法挂载组件:未定义模板或渲染函数

[Vue 警告]:无法挂载组件:Vue CLI 4 中未定义模板或渲染函数

[Vue 警告]:无法挂载组件:未定义模板或渲染函数。 -vue-simple-uploader

构建 Vue 项目时出现错误“无法安装组件:未定义模板或渲染函数”

Laravel 6 + Vue.js 无法挂载组件:未定义模板或渲染函数

Vue警告:无法安装组件:未定义模板或渲染功能