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

Posted

技术标签:

【中文标题】在我的 laravel 项目中实现 vue.js 代码时遇到问题【英文标题】:Having Problem in implementng vue.js codes in my laravel project 【发布时间】: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

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

仍未检测到 他在编辑之前更改了问题,他使用了 这是代码,我更正了它 【参考方案2】:

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

【讨论】:

【参考方案3】:

试试这个

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

【讨论】:

以上是关于在我的 laravel 项目中实现 vue.js 代码时遇到问题的主要内容,如果未能解决你的问题,请参考以下文章

我可以在 Laravel 中同时使用 OAuth 和 Auth 吗?

Laravel 4.2 Vuejs

在 Vue.js 中实现

为啥我得到错误count():参数必须是在laravel中实现Countable的数组或对象?

在 Vue.js 应用程序中实现屏幕控制台日志组件

为啥在 Vue js 中尝试从 firebase 检索令牌时出现错误?