在我的 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 吗?