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

我期望看到的是＆＃34;这是一个测试＆＃34;出现在主屏幕上的那个div中，但当然没有出现，因为如上所述，Vue在身体标签之后立即绑定到div（好吧，我假设这是为什么无论如何）。

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

非常感谢任何帮助。

附录1

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

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

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 Integration

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

（1）在页面的任何位置添加带有自定义标记的占位符HTML，即使周围的div已经是Vue-ified。带有自定义组件的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模块而不是原始文件，并且会失败。< / p>

（4）运行gulp，完成后刷新页面。 Gulp将调用Browserify，它处理resources/assets/js/app.js，现在包含我们要处理的自定义JavaScript并包含在最终的public/js/app.js文件中。

如果您在已经安装了Spark安装程序的干净Laravel安装上执行了这些步骤（我将我的mod设置为home.blade.php），您应该会在页面上看到示例文本。

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

1 个答案: