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

Question

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

我的第一次尝试失败了，因为我只是尝试在主视图中创建一个新的div 并将我的 Vue 代码绑定到该div。这是div：

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

这里是对应的JS代码：

new Vue( {
    el: '#my-stuff',
    data: {
        test: 'This is a test'
    }
});

我希望看到的是“这是一个测试”字样出现在主屏幕上的那个 div 中，但当然什么也没有出现，因为如前所述，Vue 在 body 标记之后立即绑定到 div（好吧，我假设这就是原因）。

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

任何帮助将不胜感激。

附录 1

要重现与我使用的完全相同的设置，需要安装 Laravel 5.2 的新副本，然后使用 spark 安装程序添加 spark 内容，然后添加包含以下代码的 app.js public 文件夹，在 home 视图中的任意位置添加相应的 div，并在导入 gulp 生成的主 javascript 文件的脚本标签正下方添加一个脚本标签以包含 app.js。

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

https://jsfiddle.net/5oLLte2e/

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

Answer 1

Vuejs 组件

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

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

脚本必须先加载组件：

Vue.component('my-app', {
  template: '<div>{{myMessage}}<br/><slot></slot></div>',
  data: function() {
    return {
      myMessage: 'This is my message'
    }
  }
});

new Vue( {
  el: '#main-app',
  data: {
    mainMessage: 'This is the main module'
  }
});

输出将是：

This is the main module
This is my message
Some composable content

这里是小提琴：Components with Vue

请记住，您始终可以使用唯一 id 将模板放入页面中，或者更惯用的方法是：

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

---

Laravel Spark 集成

在 Sparkified Laravel 应用程序中添加组件的步骤如下：

(1) 在页面的任意位置添加带有自定义标签的占位符 HTML，即使周围的 div 已经被 Vue 化。带有自定义组件的 HTML 可能如下所示：

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

(2) 实现Vue组件并将JavaScript文件保存在resources/assets/js中。例如，我们可以将以下代码保存为my-component.js：

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

    template: '{{ message }}'
})

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

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

(3) 在resources/assets/js/app.js 中的代码中添加一条require 语句（下面的第二行），使文件如下所示：

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 安装程序处理的干净 Laravel 安装上执行这些步骤（我将我的 mod 设置为 home.blade.php），您应该会在页面上看到示例文本。