Vue.js 不渲染组件答案

【问题标题】：Vue.js doesn't render componentsVue.js 不渲染组件
【发布时间】：2018-01-24 17:20:47
【问题描述】：

我正在使用 Vue.js，我想尝试渲染组件，但它不起作用

main.js：

import Vue from 'vue';
import 'bulma';
import Navbar from './Navbar.vue';

Vue.component('navbar', Navbar);
const MyC = Vue.component('myc', {
  template: '<h1>Are you working?</h1>',
});

const root = new Vue({
  el: '#app',
  components: {
    Navbar, MyC,
  },
});

index.html

<body>
  <div id="app">
    <navbar></navbar>
    <myc></myc>
  </div>
  <script src="dist/build.js"></script> <!-- Webpack endpoint -->
</body>

Navbar.vue

<template>
<h1>HELLO FROM NAVBAR</h1>
</template>

<script>
// Some logic here

export default {
  name: 'navbar',
};

</script>

我按照指南中的说明进行编码，但渲染组件的两种方法都不起作用

我只有空白页

我正在使用 webpack+vue-loader

[更新]

它无需组件导入仅渲染模板即可工作

[更新 2]

收到这条消息

[Vue 警告]：未知的自定义元素：<navbar> - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

【问题讨论】：

您没有收到任何错误？
不，即使我在 Vue 选项中使用 template: '<h1>Hello</h1>'，它也不会出现

标签： javascript vue.js

【解决方案1】：

我已将所有内容移至App.vue

render: h => h(App) 为我工作

【讨论】：

【解决方案2】：

将你的代码从 index.html 移动到 app.vue，index.html 是一个 html 文件而不是一个 vue 文件

试试吧，现在就是工作，幸福生活。

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

Vue.component('myc', {  //gobal components
  template: '<h1>Are you working?</h1>',
})

new Vue({
    el: '#app',
    template: '<App><App/>',
    components: {
        App
    }
})

//index.html
<body>
  <div id="app">
  </div>
  <script src="dist/build.js"></script>
</body>

//app.js
<template>
    <div class="app">
        <navbar></navbar>
        <myc></myc>
    <div
</template>

<script>
     import navbar from 'path of Navbar.vue'  //local components
     export default {
       name: 'app',
       component:{
         navbar
       }
     }
</script>

【讨论】：

它也不起作用。似乎是 webpack 或 vue-loader 问题
谢谢，我也做了同样的事情，但template 和“组件”选项不起作用。我使用了render，它现在可以工作了。不过谢谢你的回答