将Laraval与Vue js集成

Question

我向你提出我的问题。我正在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 .........
            },
})

所有的逻辑(方法和数据)都在刀片视图脚本中，我现在不使用组件。在项目的开发中，我需要添加一个组件(微小的mce - wysiwyg)。为此，我不得不使用Laravel，以便将组件加载到视图中。

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中，另一个在刀片视图中，必须与相同的元素挂钩，因此ID相同？

el: '#app',

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

第二个问题

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

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

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

Answer 1

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

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

我需要把Vue写到页面中吗，包括脚本

不是的。如果在编译后的js中将Vue实例分配给window对象，则不再需要CDN。不过要小心:在没有或async的情况下，在使用刀片vue实例对脚本标记进行之前，必须包含已编译的js文件。

<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实例是一种糟糕的做法，在某种程度上可能会起作用，但是，正如您在本例中所注意到的，这将成为一个问题。

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

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

在刀片文件中，将要与Js共享的数据结构附加到窗口对象：

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