【发布时间】：2021-03-16 16:10:12
【问题描述】：
在春季初次尝试之后，我正在尝试正确学习 Laravel 和 Vue。不过，我对两者都还很陌生。
我在 Windows 10 中使用 Laravel 8.x 和 Vue 2.6.12。我正在观看有关将 Vue 与 Laravel 结合起来的视频。该视频适用于旧版本的 Laravel，可能是 5.5，也可能是稍旧的 Vue，所以这很可能是我的问题的本质。这是视频的链接。我大约在 8:00 分钟。
我遇到的问题是，当我尝试执行我的代码时，Laravel 看不到我的文章组件。
我的 app.js 文件位于 /resources/assets/js/app.js。代码如下：
require('./bootstrap');
window.Vue = required('vue');
Vue.component ('Articles', require('./components/Articles.vue'));
const app = new Vue({
el: '#app'
});
包含脚本标签的文件位于 /resources/views/welcome.blade.php。这是代码：
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Larticles App</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<div class="container">
<Articles></Articles>
</div>
</div>
<script src="{{ asset('js/app.js') }}">console.log("Made it to here!");</script>
</body>
</html>
文章组件位于 /resources/assets/js/components/Articles.vue。代码如下：
<template>
<div>
<h2>Articles</h2>
</div>
</template>
<script>
export default {
name: "Articles",
beforeCreate() {
console.log("Articles - beforeCreate()");
},
created() {
console.log("Articles - created()");
},
beforeMount() {
console.log("Articles - beforeMount()");
},
mounted() {
console.log("Articles - mounted");
}
}
</script>
<style lang="scss" scoped>
#app {
background-color: gold;
color: blue;
}
</style>
我需要进行哪些更改才能使其正常工作？我认为问题是 app.js 中 Vue.component 语句的 require 部分，但我已经尝试了所有我能想到的变体，但都没有成功。我想不出还有什么可以尝试的！我在 Vue 手册中找不到关于 Vue 或 Laravel 中此语句的特殊语法的任何内容。
我应该提一些事情。作为故障排除的一部分，我与他在视频中所做的操作有轻微的偏差。我在 Vue.component 语句的第一个参数中将 Articles 大写，并且在welcome.blade.php 文件的容器 div 中也将其大写。 （最初，我在每个地方都写成小写，但它也不是那样工作的。）我还在组件生命周期挂钩和脚本标记中添加了几个 console.log 语句。但是它们绝对没有出现在控制台中。
另外，出于某种原因，我的 IDE VS Code 坚持在welcome.blade.php 中显示为红色。红色总是让我想到错误，但没有任何错误信息。如果我将这些标签写为（并相应地更改 app.js），它们会保持红色，所以我认为这不是大小写问题。
我还应该提到 Inspector 显示为 .它不应该准确地显示我的welcome.blade.php 文件中的内容吗？
【问题讨论】：
标签： laravel visual-studio-code