时间戳

首页 > 解决方案 > 在我的 laravel 项目中实现 vue.js 代码时遇到问题

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

问题描述

我有一个全新安装的 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

标签： laravelvue.js

解决方案

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

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

推荐阅读