laravel - Vue.component() 语句中的路径如何工作？

问题描述

在春季初次尝试之后，我正在尝试正确学习 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。这是代码： <!doctype html>

<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），它们会保持红色，所以我认为这不是大小写问题。

我还应该提到，检查员显示 as 。它不应该准确地显示我的welcome.blade.php 文件中的内容吗？

标签： laravelvisual-studio-code

laravel - Vue.component() 语句中的路径如何工作？

问题描述

解决方案

推荐阅读