Javascript 在laravel 6.x中渲染多个vue组件

我是Laravel和Vue的新手，我创建了一个导航组件和一个文章组件

我相信我已经正确地设置了Vue，问题是显示了我的导航Vue组件，但没有显示我的文章组件

这是我的密码：

app.js

require（“./bootstrap”）；
window.Vue=require（“Vue”）；
/**
*以下代码块可用于自动注册您的
*Vue组件。它将递归扫描此目录以查找Vue
*组件，并使用其“basename”自动注册它们。
*
*例如../components/ExampleComponent.vue->
*/
const files=require.context（“./”，true，/\.vue$/i）；
files.keys（）.map（key=>
Vue组件(
钥匙
.拆分（“/”）
.pop（）
.split（“.”[0]，
文件（键）。默认值
)
);
const app=新的Vue({
el:“应用程序”
});

app.blade.php

{{config（'app.name'，'Laravel'）}
@产量（‘含量’）

欢迎使用.blade.php

@extends（'layouts.app'））
@节（“内容”）

第3.vue条

文章
导出默认值{
数据（）{
返回{
第[…]条，
第条：{
id:“”，
标题：“，
正文：“”
},
第11条：，
分页：{}，
编辑：false
};
},
创建（）{
this.fetchArticles（）；
},
方法：{
fetchArticles（）{
获取（“api/文章”）
.then（res=>res.json（））
。然后（res=>{
console.log（res.data）；
});
}
}
};

这是一个非常小的错误（bug？），很容易被忽略。除了一件事，你做的一切都对。由于以下原因，代码未按预期工作：

。如果您将其改为：

，它将按预期工作

---

我不确定这个问题的确切原因，但我在某个地方读到Vue不支持自终止标记，因为它们在HTML5中无效，但我不确定。也许有人可以对此进行详细说明。

这是一个非常容易忽略的非常小的错误（bug？）。除了一件事，你做的一切都对。由于以下原因，代码未按预期工作：

。如果您将其改为：

，它将按预期工作

---

我不确定这个问题的确切原因，但我在某个地方读到Vue不支持自终止标记，因为它们在HTML5中无效，但我不确定。也许有人可以对此进行详细说明。

打开浏览器的开发人员工具，检查控制台是否有任何错误消息，如果有，请与他人分享。Vue处于开发模式时没有错误。我可以将Vue组件添加到问题@tamrat添加了带有文件名的Vue组件@tamrat，两者都在

resources/js/components

folder中打开浏览器的开发工具，检查控制台是否有任何错误消息，如果有，请共享。没有错误，只是Vue处于开发模式。我可以将Vue组件添加到问题@tamrat添加了Vue组件@tamrat，并使用文件名，它们都在

resources/js/components

folder中，我不确定我会称之为bug。这就是Vue的工作原理。当您在js中编译Vue应用程序时，编译器会为您解决这个问题，这不是问题，但对于未编译的Vue，您必须打开和关闭标记（以及使用kebab case）@tamrat您救了我的命！非常感谢你。但是，在纯Vue应用程序中，自动关闭标记确实有效。但webpack.mix可能以另一种方式编译它。可能不会被称为bug，但是需要有一些关于这方面的解释。如果它不是容器元素，则通常使用自动关闭标记。我不确定是否会将其称为bug。这就是Vue的工作原理。当您在js中编译Vue应用程序时，编译器会为您解决这个问题，这不是问题，但对于未编译的Vue，您必须打开和关闭标记（以及使用kebab case）@tamrat您救了我的命！非常感谢你。但是，在纯Vue应用程序中，自动关闭标记确实有效。但webpack.mix可能以另一种方式编译它。可能不会被称为bug，但是需要有一些关于这方面的解释。如果不是容器元素，则通常使用自动关闭标记。