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

Posted 2023-02-22

【中文标题】如何将 Vuejs 组件添加到 Laravel Spark 应用程序？

【英文标题】：How to add a Vuejs component to a Laravel Spark application?

【发布时间】：2016-05-17 02:45:47

【问题描述】：

我正在使用 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 集成配置，或者如果这甚至是必要的。

【问题讨论】：

Vue 应该直接绑定到您通过 el 的值指示的 div。你能在小提琴中重现吗？

你在哪里包含你的 vue 脚本？它必须进入身体，而不是进入头部。

@DavidK.Hess 我创建了一个小提琴来说明问题的本质，并在问题中添加了指向小提琴的链接。

@gurghet 我将 app.js 包含在正文中，距离末尾几行，就在包含 gulp 生成的主要 app.js 之后。

【参考方案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），您应该会在页面上看到示例文本。

【讨论】：

感谢您的回答 - 这绝对是非常有帮助的。然而，问题的一个重要部分是关于将 JavaScript 代码放在哪里，而这正是 Spark 相关内容的用武之地。我自己也取得了一些进步。我发现 Spark 安装程序将一个名为 app.js 的文件放入项目的资源/资产/js 文件夹中，这似乎是引导我的组件的正确位置，因为该文件不会被作曲家更新覆盖并且已经配置为由 Elixir/gulp 拾取。现在我需要找出正确的方法来使用这个设施。

顺便说一句 - 如果我能自己解决最后一个难题，我会将其添加到您的答案中并接受它，因为我非常感谢您为展示 Vue 方面所做的努力。跨度>