[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 CLI 4 中未定义模板或渲染函数
[Vue 警告]:无法挂载组件:未定义模板或渲染函数。 -vue-simple-uploader
构建 Vue 项目时出现错误“无法安装组件:未定义模板或渲染函数”