使用 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。它看起来像这样（但使用 cmets）：

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 语句）并选择不同的新实例的元素 ID。然后，您将创建一个新的 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 实例中设置 prop：

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

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

...

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

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

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

...