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

Question

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

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

但我的问题是我需要所有的JS代码都被webpack压缩和处理（Laravel混合）所以javascript源是没有暴露。

有什么想法吗？提前致谢。

Answer 1

如果你运行以下artisan命令在Laravel中安装Vue：

composer require laravel/ui
php artisan ui vue

你的 app.js 文件是 Laravel 的标准配置，将自动更新以导入 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 要求语句）并为新实例选择不同的元素 ID。然后你会创建一个新的 Javascript 文件来存放你想要的特定 components/functions 并将它们添加到你的 webpack.mix.js 中，如下所示：

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

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

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

编辑：基于评论

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

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

您可以提供订单的 ID（$id 需要从 controller/view 传递过来）

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

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

...

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

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

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

...

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

Building a Laravel MPA with Blade, but adding Vue to some pages

laravel

vue.js

laravel-blade

laravel-mix

multi-page-application