Vue.js：为什么不渲染组件？

Question

我编写了一个非常简单的vue.js应用程序，以学习如何使用vue文件。

这是代码：

App.vue

<template>
    <article></article>
</template>

<script>

export default {
    data: function() {
        return {

        }
    }
}
</script>

<style>

</style>

main.js：

import Vue from 'vue'
import App from './App.vue'
import Article from './Article.vue';

Vue.config.productionTip = false;

Vue.component('article', Article);

new Vue({
  render: h => h(App),
}).$mount('#app');

Article.vue：

<template>
    <div>
        <h1>bla bla</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            };
        }
    }
</script>

我希望在浏览器中看到“ bla bla”。但是，当我打开浏览器时，会看到白页。控制台显示：

  

[Vue警告]：请勿将内置或保留的HTML元素用作组件   id：文章

当我打开Vue开发工具时，我看到的是：

未添加任何文章组件。你知道如何解决吗？

Answer 1

请勿将html标签article用作组件名称。重命名它，它应该呈现。

例如：

Vue.config.productionTip = false;

Vue.component('article2', {
  template: '<div>Hi there</div>'
});

Vue.component('app', {
  template: '<article2></article2>'
})

new Vue({
  render: h => h('app'),
}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Answer 2

调用main.js中的组件不是最好的结构+在Vue实例中不要调用他，例如：

Article.vue

<template>
    <div>
        <h1>bla bla</h1>
    </div>
</template>

<script>
    export default {
        name: 'article'
    }
</script>

App.vue

<template>
    <article></article>
</template>

<script>
import article from './Article';

export default {
    components: {
      article,
   },
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

希望与您一起工作。

Answer 3

这是因为您只是在渲染App：

render: h => h(App),

您宁愿在App中导入Article并按以下方式使用：

<template>
    <article></article>
</template>

<script>
import Article from './Article.vue'
export default {
    components: { article: Article },
    data: function() {
        return {

        }
    }
}
</script>

并从App中删除以下内容：

import Article from './Article.vue';

Vue.config.productionTip = false;

Vue.component('article', Article);

---

但是文章是html5元素，所以建议您使用其他名称，例如：

components: {
  myArticle: Article
}

<my-article></my-article>