laravel 5 vue 设置不清楚答案

【问题标题】：laravel 5 vue setup unclearlaravel 5 vue 设置不清楚
【发布时间】：2017-12-06 12:06:51
【问题描述】：

我现在已经尝试了所有方法，但我无法让 vue.js 在 Laravel 上运行，似乎没有任何具体的内容表明将 x 放入文件 y 以使其正常工作。

我已经用 npm，composer 尝试了所有的东西，但我什至无法获得一个基本的例子来工作。我非常不清楚我需要什么以及需要去哪里。

我正在使用刀片从 app.layout 视图扩展，但不清楚是需要将代码添加到 assets/js/app.js 还是只在我的默认应用布局中使用 script src="" 标签。

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));

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

var app5 = new Vue({
  el: '#app-5',
   data: {
     message: 'Hello Vue.js!'
   }  ,
   methods: {
     reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
   }
 })

app.layout.blade.php

<script src="{{asset('/js/app.js')}}"/></script>

..some more html

<body id="app">
   <div id="app-5">
   <p>@{{ message }}</p>
   <button v-on:click="reverseMessage">Reverse Message</button>
   </div>
   </body>

..more html

【问题讨论】：

标签： laravel-5 vue.js

【解决方案1】：

为什么要定义两个 Vue const？

这部分js代码不需要：

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

删除该行并对其进行测试：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));



var app5 = new Vue({
  el: '#app-5',
   data: {
     message: 'Hello Vue.js!'
   }  ,
   methods: {
     reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
   }
 })

但请记住，您的 vuejs 工作应该在中间：

<div id="app-5"> vuejs codes should be run here </div>

别忘了运行npm run watch 或npm run dev 来编译

如果您对这种方式有错误和问题，您可以跳到第二种方式

第二种方式：

在public/js/目录下创建vue-script.js文件

vue-script.js:

var app5 = new Vue({
  el: '#app',
   data: {
     message: 'Hello Vue.js!'
   }  ,
   methods: {
     reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
   }
 })

在resources/views/目录下创建sample.blade.php文件

sample.blade.php：

<!DOCTYPE html>
<html>
<head>
<title>test page</title>
</head>

<body>
  <div id="app">
    @{{ message }}
    <button v-on:click="reverseMessage">Reverse Message</button>
  </div>
<script src="https://unpkg.com/vue"></script>
<script src="{{ asset('js/vue-script.js') }}"></script>

</body>
</html>

然后在routes/web.php:

Route::get('testvue', function() {
    return view('sample');
});

然后在浏览器中访问 url：/testvue

【讨论】：

它仍然只是将 {{ message }} 显示为文本
你是在运行 npm run watch 还是 npm run dev 来编译？
我收到一个错误：npm ERR！ errno 1 npm 错误！ @开发：cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
@Florian 好的，我用第二种方法更新我的答案，你可以测试它
好吧，这行得通。但我仍在尝试使用vee-validate.logaretm.com 之类的东西，但它不起作用。