laravel - 使用 Blade 构建 Laravel MPA，但将 Vue 添加到某些页面

Question

我正在使用 Laravel 和 Blade 模板开发一个经典的 MPA 网页。但是在某些页面中，我想添加一些反应性来改善用户体验，为此使用 Vue 框架。

到目前为止一切顺利，如果我script在相应刀片模板末尾的普通标记中导入 Vue 和 JS 代码，我就完成了。

但我的问题是我需要所有的 JS 代码都被 webpack (Laravel Mix) 压缩和处理，这样 javascript 源就不会暴露。

有任何想法吗？提前致谢。

Answer 1

如果您运行以下工匠命令在 Laravel 中安装 Vue：

composer require laravel/ui
php artisan ui vue

Laravel 标配的app.js文件将自动更新以导入 Vue。它看起来像这样（但带有注释）：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
});

因此，您可以开始为网站的不同部分创建 Vue 组件。

但是，如果您的问题是您希望基于页面在整个应用程序中拥有多个不同的 Vue 实例，您将首先采用与上述代码块相同的布局（减去 bootstrap require 语句）并为新实例。然后，您将创建一个新的 Javascript 文件来容纳您想要的特定组件/功能，并将它们添加到您的 webpack.mix.js 中，如下所示：

mix.js('resources/js/app.js', 'public/js') // old line
   .js('resources/js/header/header.js', 'public/js') // additional line

然后在您的刀片文件中，您只需像这样使用新脚本：

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

编辑：基于评论

将数据从刀片文件传递到特定 Vue 实例的最简单方法可能是将数据支持在启动 Vue 实例的元素上（类似于将刀片变量支持到 Vue 组件）。如果这是您的元素：

const app = new Vue({
    el: '#show-order',
});

您可以支持订单的 id（$id 需要从控制器/视图传递）

<div id="show-order" order_id="{{ $id }}">
    ...
</div>

然后在 Vue 实例中设置道具：

const app = new Vue({
    el: '#show-order',
    props: ['order_id'],
});

并且可能在这样的方法中使用：

const app = new Vue({
    el: '#show-order',
    props: ['order_id'],

    methods: {
        logMyProp: function() {
            console.log(this.order_id);
        }
    }
});

或者，您可以在您的实例中创建一个方法，该方法负责调用将数据直接加载到实例中的方法，而不是从控制器 => 刀片 => vue 组件传递数据。

...

data: function() {
    return {
        order: {},
    }
},

methods: {
    loadMyData: function() {
        let vm = this;

        $.ajax({
            url: '/orders/load/'
        }).done(function(response) {
            vm.order = response;
        });
    }
},

...