在我的 laravel 项目中实现 vue.js 代码时遇到问题答案

【问题标题】：Having Problem in implementng vue.js codes in my laravel project在我的 laravel 项目中实现 vue.js 代码时遇到问题
【发布时间】：2020-03-30 01:41:20
【问题描述】：

我有一个全新安装的 laravel 应用我已经运行了所有必需的命令 npm install 和 npm run dev 并在我的 app.blade.php 文件中包含了 app.js 文件但是vue js还是不行

我的 app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Demo Laravel Vue Chat</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}">
</head>
<body>
<div class="container">
    <section>
        <div id="app">
            <ul class="list-group">
              <li class="list-group-item active">Group Name</li>
              <li class="list-group-item">Dapibus ac facilisis in</li>
              <li class="list-group-item">Morbi leo risus</li>
              <li class="list-group-item">Porta ac consectetur ac</li>
              <li class="list-group-item">Vestibulum at eros</li>
              <input type="text" placeholder="Type Your Message" class="form-control" v-model="message" @keyup.enter="send">
            </ul>
        </div>
    </section>
</div>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>

我的 webpack 文件

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

我的 js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
    data: {
        message: '',
    },
    methods:{
        send()
        {
            console.log(this.message);
        }
    },
});

但控制台没有给出输出并且 vue 开发工具说未检测到 vue js

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

你忘记在body标签中添加id app

<div id='app'></div>

【讨论】：

仍未检测到
他在编辑之前更改了问题，他使用了
这是代码，我更正了它

【解决方案2】：

您需要在主包装器中有 id='app' 。您的 div 由部分标签和带有类容器的 div 包装

【讨论】：

【解决方案3】：

试试这个

<div id="app">
   <example-componen></example-componen>
</div>

【讨论】：