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

Question

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

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

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

对应的JS代码如下:

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

我希望看到的是“This is a test”这几个字出现在主屏幕上的那个 div 中，但当然什么也没有出现，因为如前所述，Vue 立即绑定(bind)到一个 div在 body 标签之后(好吧，我假设这就是原因)。

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

如有任何帮助，我们将不胜感激。

附录 1

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

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

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

这是 fiddle :Components with Vue

请记住，您始终可以使用唯一 ID 或更惯用的方式将模板放在页面中，例如:

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

---

Laravel Spark 集成

在 Sparfied 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) 加一个require resources/assets/js/app.js 中代码的语句(下面第二行)这样文件看起来像这样:

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 安装上执行这些步骤(我将我的模组修改为 home.blade.php )，您应该会在页面上看到示例文本。