Vue.js不呈現組件

Question

我正在使用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

[UPDATE]

它無需導入組件即可工作，只需渲染模板即可

[更新2]

得到此消息

[Vue警告]：未知的自定義元素： <navbar> -您是否正確注冊了組件？ 對於遞歸組件，請確保提供“名稱”選項。

Answer 1

將代碼從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>

Answer 2

我已將所有內容移至App.vue

render: h => h(App)對我有用

Vue.js不呈現組件

問題描述

2 個解決方案

解決方案1
1 已采納 2017-08-16 14:49:09

解決方案2
0 2017-08-16 15:22:46

Vue.js不呈現組件

問題描述

2 個解決方案

解決方案1 1 已采納 2017-08-16 14:49:09

解決方案2 0 2017-08-16 15:22:46

解決方案1
1 已采納 2017-08-16 14:49:09

解決方案2
0 2017-08-16 15:22:46