将 Laravel 与 Vue js 集成答案

【问题标题】：Integrate Laraval with Vue js将 Laravel 与 Vue js 集成
【发布时间】：2021-12-16 20:21:10
【问题描述】：

我向您提出我的问题。我正在 Laravel 中开展一个项目，我最初将 Vue js 作为脚本集成到这样的刀片视图中，使用 CDN 导入 Vue。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
 var app = new Vue({
            el: '#app',
            data: {
                search: '',
                //other data .........
            },
})

所有逻辑（方法和数据）都在刀片视图脚本中，我暂时不使用组件。在项目的开发中，我需要添加一个组件（Tiny mce - wysiwyg）。为此，我必须使用 Laravel Mix，才能将组件加载到视图中。

require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('tinymce', require('./components/Tinymce.vue').default);
const app = new Vue({
    el: '#app',
});

第一个问题 我问自己的第一个问题是：Vue 的两个实例，源文件 /resources/js/app.js 中的一个和刀片视图中的一个必须挂钩到相同的 HTML 元素，因此具有相同的 ID ?

el: '#app',

我无法将 Vue 实例从刀片文件移动到 app/js 文件中，因为它与 php 代码交织在一起。我必须保持两个不同的实例。一个用于加载组件，在本例中为 Tiny Mce，另一个用于在 Laravel 刀片视图中运行脚本。这两个实例的行为和交互方式如何？

第二个问题

另外我问自己的第二个问题是：我需要把Vue cdn到页面中，包括脚本

<script src="{{ asset('js/app.js') }}" defer ></script>

在 app.js 文件中导入 Vue，我无法在视图中通过 CDN 删除 Vie

【问题讨论】：

标签： laravel vue.js vue-component laravel-mix

【解决方案1】：

两个 Vue 实例必须挂钩到同一个 HTML 元素，因此具有相同的 ID？

不，相反，我认为将两个不同的实例分配给同一个元素并不是一个好主意。如果两个实例开始相互干扰，您可能会有一些奇怪的行为。为实例使用两个单独的 HTML 根

是否需要将Vue cdn到页面中，包括脚本

没有。如果在编译的 js 中将 Vue 实例分配给 window 对象，则不再需要 CDN。请注意：您编译的 js 文件必须包含在刀片 vue 实例的之前您的脚本标记中，没有 defer 或 async。

<script src="{{ mix('js/yourfile.js') }}"></script>
// ^^^ this one before and without defer
// no vue included through CDN
<script>
  var app = new Vue({
    ....
  })
</script>

现在，让我们向房间里的大象讲话。在刀片文件中包含一个完整的 vue 实例是一种不好的做法，它可能会在一定程度上起作用，但是正如您在这种情况下所注意到的，它会成为一个问题。

我无法将 Vue 实例从刀片文件移动到 app/js 文件中，因为它与 php 代码交织在一起。

我可以想象 PHP 和 JS 代码相互交互的唯一方法是为了将一些数据从 PHP 传递到 JS。如果这是问题所在，这里有一个关于如何做到这一点的想法：

在你的blade文件中，将你想要与Js共享的数据结构附加到window对象上：

<script>
  window.sharedData = {
    key: @if($cond) 'value1' @else 'value2'
    ...
  }
</script>

如果你有一个 PHP 对象想要直接共享，你可以使用@json 指令：

<script>
  window.sharedData = @json($sharedData);
</script>

现在，之后这个脚本标签可以包含混合文件：

<script src="{{ mix('js/yourfile.js') }}"></script>

在那里，您可以将 window.sharedData 对象与使用 PHP 代码构建的数据一起使用：

var app = new Vue({
    data: window.sharedData
  })

【讨论】：