我尝试使用电子vue样板。设置项目后一切正常,但是当我创建一个新的.vue文件(TopMenu.vue)时,我得到:
vue.common.js?4eb4:2569 [Vue warn]: Unknown custom element: <topmenu> -
did you register the component correctly? For recursive components, make
sure to provide the "name" option. (found in component <landing-page>)
我使用确切的语法作为样板文件附带的原始.vue文件:
LandingPageVue.vue:
<style scoped>
img {
margin-top: -25px;
width: 450px;
}
</style>
<template>
<div>
<!-- <img src="./LandingPageView/assets/logo.png" alt="electron-vue"> -->
<h1>Welcome.</h1>
<topmenu></topmenu>
<current-page></current-page>
<versions></versions>
<links></links>
<div class="container">
</div>
</template>
<script>
import TopMenu from './LandingPageView/TopMenu'
import CurrentPage from './LandingPageView/CurrentPage'
import Links from './LandingPageView/Links'
import Versions from './LandingPageView/Versions'
export default {
components: {
TopMenu,
CurrentPage,
Links,
Versions
},
name: 'landing-page'
}
</script>
TopMenu.vue(我的档案):
<template>
<p>
TOPMENU
</p>
</template>
顺便说一句,黑客如何<current-page></current-page>
工作(注意“ - ”破折号),如果声明它没有声明?
答案 0 :(得分:2)
它不起作用,因为您没有在vue文件中导出任何内容。
在TopMenu.vue文件中尝试此操作:
<template>
<p>
TOPMENU
</p>
</template>
<script>
export default {
}
</script>
同时将html <topmenu></topmenu>
更改为<top-menu></top-menu>
对于您的第二个问题,HTML不区分大小写,因此您的标题案例组件与html标记不匹配。所以Vue将你的标题案例组件翻译成'破折号'。 从文档本身可以解释原因:
请注意,Vue不会对自定义标记名称强制执行W3C规则(全小写,必须包含连字符),但遵循此约定被视为良好做法。
您可以从docs
中了解更多信息