Laravel 5 如何将Vuejs组件添加到Laravel Spark应用程序？

我正在与Laravel Spark一起开发Laravel 5.2项目（在撰写本文时仍处于测试阶段），并尝试使用默认布局和视图添加一些Vuejs功能

我的第一次尝试失败，因为我只是尝试在主视图中创建一个新的

div

，并将我的Vue代码绑定到该

div

。这是

div

：

    <div id="my-stuff">
        <p>@{{ test }}</p>
    </div>

我希望看到的是主屏幕上该div中出现了“This is a test”（这是一个测试）字样，但当然没有出现任何内容，因为如前所述，Vue会在body标记之后立即绑定到一个

div

（好吧，我假设这就是原因）

我认为我的问题的解决方案是使用Vue组件，它们本身看起来相当简单，但我不知道我的代码放在哪里，如何将我的代码与Gulp过程集成，我需要修改哪个Spark文件（如果有？）注册我的组件以及如何确保在创建Vue实例之前注册我的组件

任何帮助都将不胜感激

附录1

要复制与我使用的完全相同的设置，需要安装Laravel 5.2的新副本，然后使用spark安装程序添加spark内容，然后将包含以下代码的

app.js

添加到

public

文件夹，在

home

视图中的任意位置添加相应的

div

，并在导入gulp生成的主javascript文件的脚本标记的正下方添加一个脚本标记，以包含

app.js

虽然在小提琴中复制整个设置是不切实际的，但我认为以下小提琴说明了问题的本质：

---

从内存来看，AngularJS也有同样的限制。对我来说，这完全是合理的，为什么这不起作用，Vuejs中的解决方案最有可能使用组件，但这种情况下的挑战是知道如何捆绑组件以及在何处保存组件，以便将其与gulp配置集成，或者如果有必要的话。

Vuejs组件

如果您想拥有多个vue实例，简短的回答是：是，您需要组件

<div id="main-app">
<p>{{ mainMessage }}</p>
    <my-app>
        <p>Some composable content</p>
    </my-app>
</div>

这是小提琴：

请记住，您可以始终使用唯一的id将模板放入页面中，或者更习惯地使用以下内容：

<script type="x/template" id="my-app">
  Your template here
  {{ your component variables }}
</script>

（3） 在

resources/assets/js/app.js

中的代码中添加一条

require

语句（下面第二行），使文件如下所示：

<div id="example">
    <my-component></my-component>
</div>

require('laravel-spark/core/bootstrap');
require('./my-component.js'); // This is the key!

new Vue(require('laravel-spark'));

请注意，在文件名前面包含前导的

/

非常重要，否则Browserify将假定它正在查找

npm

模块而不是原始文件，并将失败

（4） 运行

gulp

，完成后刷新页面。Gulp将调用Browserify，它处理

resources/assets/js/app.js

，它现在包括我们要处理的自定义JavaScript，并包含在最终的

public/js/app.js

文件中

---

如果您在经过Spark installer处理的干净Laravel安装上执行这些步骤（我将mods设置为

home.blade.php

），您应该会看到示例文本出现在页面上。

Vue应该直接绑定到您通过

el

值指示的div。你能用小提琴复制吗？你在哪里包括你的vue脚本？它必须进入身体，而不是头部。@DavidK.Hess我已经创建了一个小提琴来说明问题的本质，并在问题中添加了一个指向小提琴的链接。@gurghet我在身体中包括app.js，从最后几行开始，就在包含gulp制作的主app.js之后。谢谢你的回答-这肯定非常有用。然而，问题的一个重要部分是将JavaScript代码放在哪里，这就是与Spark相关的东西的用武之地。我自己也取得了一些进步。我发现Spark安装程序将一个名为app.js的文件放入项目的resources/assets/js文件夹，这似乎是引导我的组件的正确位置，因为此文件不会被composer更新覆盖，并且已经配置为由Elixir/gulp拾取。现在我需要找到正确的方法来利用这个工具。顺便说一句，如果我能自己解决最后一个难题，我会把它添加到你的答案中，并接受它，因为我真的很感谢你为展示Vue方面所做的努力。

<script type="x/template" id="my-app">
  Your template here
  {{ your component variables }}
</script>

<div id="example">
    <my-component></my-component>
</div>

var MyComponent = Vue.extend({
    data: function() {
        return { message: 'This is a test' }
    },

    template: '{{ message }}'
})

Vue.component('my-component', MyComponent)

new Vue({
    el: '#example'
})

require('laravel-spark/core/bootstrap');
require('./my-component.js'); // This is the key!

new Vue(require('laravel-spark'));