gpt4 book ai didi

javascript - Vue.js 不渲染组件

转载 作者:行者123 更新时间:2023-12-03 03:39:04 28 4
gpt4 key购买 nike

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

ma​​in.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 warn]: Unknown custom element: <navbar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

最佳答案

将代码从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>

关于javascript - Vue.js 不渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45715694/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com