Vue.js 开始使用组件，尝试嵌套它们

我尝试在vuejs中嵌套两个组件。我只是不想跳进cli或webpack。所以我想在没有导入/导出的情况下实现这一点。从浏览器的控制台，我得到警告：

[Vue warn]：编译模板时出错：

组件模板应该只包含一个根元素。如果在多个图元上使用v-If，请改用v-else-If链接它们

1 |这是组件A

|^^^^^^^^^^^^^^^^^^^^^^^^^^^

发现于

--->

在这里尝试了一个类似的问题。

但它似乎是vuejs的旧版本。我不能那样做

index.html：

app.js：

var ComponentB = {
    template: "<p>This is the Component B</p>",
}

var ComponentA = {
    template: '<p>This is the Component A</p><component-b></component-b>',
    components: {
        'component-b': ComponentB
    }
}

new Vue({
    el: '#app',
    components: {
        'component-a': ComponentA,
    }
});

var组件b={
模板：“这是组件B
”，
}
变量分量a={
模板：“这是组件A
”，
组成部分：{
“组件b”：组件b
}
}
新Vue({
el:“#应用程序”，
组成部分：{
“组件a”：组件a，
}
});

---

组件b的模板应该显示在补码a的模板中。

在组件模板中，您必须只有一个HTML元素。可以将元素包装在div中

var ComponentA = {
template: '<div><p>This is the Component A</p><component-b></component-b></div>',
components: {
    'component-b': ComponentB
}

var组件a={
模板：“这是组件A
”，
组成部分：{
“组件b”：组件b
}

以前曾询问过此问题可能重复的问题。请将此类问题标记为重复，而不是回答。