VueJS error: "Failed to mount component: template or render function not defined"

Question

我很难理解 VueJS 中的组件和模板系统。我下载了 VuetifyJS PWA example template and tried to replace the complete content of Hello.vue with the content of the VuetifyJS google-contacts.vue 示例模板。我在 localhost:8080 的 npm run dev 之后收到此错误消息：

> vue.esm.js?65d7:578 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Hello> at /home/a/my-project/src/components/Hello.vue
       <App> at /home/a/my-project/src/App.vue
         <Root>

为什么不能只替换 <template></template> 内容，我需要更改什么才能使用 google-contacts.vue 模板内容而不是 Hello.vue 内容？

Answer 1

我只是遵循了这个过程，它对我来说工作正常，所以我猜它很可能是你构建中的一个错误步骤，但到目前为止无法重现它。

注意，看起来 docs/examples/layouts/google-contacts.vue 是整个页面布局的替代品，而不是单个组件（按照@B.Fleming 在评论中提到的思路），所以更合适替换App.vue 比 Hello.vue。

这是我最初做的（没有仔细阅读您的post）。但随后替换 Hello.vue 给了我相同的工作 Google 联系人页面。

VueJS error: "Failed to mount component: template or render function not defined"

VueJS error: "Failed to mount component: template or render function not defined"

vue.js

vuejs2

vue-component

vuetify.js