如何将 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'
    }
});

我希望看到 "This is a test" 出现在主屏幕上 div 中，但当然什么也没有出现，因为如前所述，Vue 绑定到 div 紧接在 body 标签之后（好吧，我假设这就是原因）。

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

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

附录 1

要重现与我使用的完全相同的设置，需要安装 Laravel 5.2 的全新副本，然后使用 spark 安装程序添加 spark 内容，然后添加 app.js 将下面的代码添加到 public 文件夹中，在 home 视图中的任意位置添加相应的 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 集成

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

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

How to add a Vuejs component to a Laravel Spark application?

vue.js

laravel-5