Laravel + VueJS - 组件不显示

Posted 2023-02-23

【中文标题】Laravel + VueJS - 组件不显示

【英文标题】：Laravel + VueJS - Component doesn't displayed

【发布时间】：2019-05-28 04:05:40

【问题描述】：

我正在尝试在我的 Laravel 应用中添加 VueJS，但我的第一个组件没有显示在我的页面上。

正如您在源页面上看到的，我们可以看到“登录”组件。

这是关联代码：

<template>
    <p>Coucou je suis un élément Vue.JS</p>
</template>

<script>
    export default 
        name: "login"
    
</script>

<style scoped>

</style>

它只是一个显示字符串的简单组件。

这里有 app.js

/**
 * First we will load all of this project's javascript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('login', require('./components/Auth/Login.vue'));

const app = new Vue(
    el: '#app'
);

但我的问题是html页面上什么都没有出现：/它完全是空白的......

如果有人能解释问题所在，将不胜感激。提前致谢。

【问题讨论】：

npm run dev 重新编译您的更改！如果控制台没有错误

已经完成 :( 很多时候，在控制台中我只是“你正在开发模式下运行 Vue。确保在部署生产时打开生产模式。在vuejs.org/guide/deployment.html 上查看更多提示“。就是这样：/

是否包含 app.js？运行 vue 时，您实际上并没有在源代码中看到类似的组件 ()。这通常意味着 vue 没有在您的应用程序上正确初始化。 vue 开发工具能告诉你什么吗？

是的，我已经将编译生成的 app.js 添加到了主模板布局中的关闭正文之前。并且 vue 开发工具告诉我未检测到 vue：/

【参考方案1】：

好吧，我发现了我的错误。我忘记添加这两行：

<script src=" asset('js/manifest.js') "></script>
<script src=" asset('js/vendor.js') "></script>