，我想嘗試呈現組件，但它不工作Vue.js不會呈現我使用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, 
    }, 
});

指數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裝載機

[空白頁UPDATE]

它的工作原理，而不部件進口只是呈現模板

[更新2]

得到這個消息

[Vue公司提醒]：未知自定義元素：<navbar> - 你正確地註冊的組件？對於遞歸組件，確保提供「名稱」選項。

來源

2017-08-16 Nick Gant

工作？ – thanksd

不，即使我使用'template：'

你好

''在Vue選項中它不會出現 –

從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>

來源

2017-08-16 14:49:09 Zany

它不工作。看起來像webpack或vue-loader問題 –

謝謝，我已經做了很多相同的工作，但'template'和'components'選項無效。我使用了'render'，現在它可以工作。但是，謝謝你的回答 –

我搬到一切App.vue

render: h => h(App)對我來說你沒有得到任何錯誤

來源

2017-08-16 15:22:46

Vue.js不會呈現我使用Vue.js組件

你好

回答

相關問題