无法安装组件：未定义模板或渲染函数。组件导入失败答案

【问题标题】：Failed to mount component: template or render function not defined. Component fails to import无法安装组件：未定义模板或渲染函数。组件导入失败
【发布时间】：2021-04-21 01:56:46
【问题描述】：

我正在尝试复制 vue 教程示例（在此处找到：https://v3.vuejs.org/guide/component-basics.html#passing-data-to-child-components-with-props），但没有成功。下面是我的代码。我有一个名为 TA.vue 的视图，我想将组件导入并渲染。任何想法我做错了什么？

TA.vue（视图）：

<template id="front">
    <b-container style="margin-top: 9rem;">
        <b-row>
            <div id="blog-posts-events-demo" class="demo">
                <div>
                    <blog_post
                        v-for="post in posts"
                        :key="post.id"
                        :title="post.title"
                    ></blog_post>
                </div>
            </div>
        </b-row>

    </b-container>

</template>

<script>
import blog_post from '../components/blog_post' // import the Header component
  export default {
    name: 'talent-acquisition',
    components: {
        blog_post
    },
    data() {
        return {
            posts: [
                { id: 1, title: 'My journey with Vue'},
                { id: 2, title: 'Blogging with Vue'},
                { id: 3, title: 'Why Vue is so fun'}
                ]
            }
        },
  }

</script>

blog_post 组件：

Vue.component('blog_post', {
    props: ['title'],
    template: `
        <div class="blog_post">
            <h4>{{ title }}</h4>
        </div>
    `
})

app.mount('#blog-posts-events-demo')

完整的错误信息：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <BlogPost>
       <TalentAcquisition> at src/views/TA.vue
         <App> at src/App.vue
           <Root>

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-cli

【解决方案1】：

您的 blog_post 文件使用的是 CDN 语法而不是 CLI 语法，因此没有导出组件。此外，它会尝试安装一个全新的 Vue 应用程序。

由于您将 Vue CLI 与单个文件组件一起使用，因此您的所有组件都需要具有与 TA.vue 组件类似的格式。所以blog_post 应该是这样的：

<template>
  <div class="blog_post">
    <h4>{{ title }}</h4>
  </div>
</template>

<script>
export default {
  props: ['title']
}
</script>

【讨论】：