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

问题描述

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

到目前为止，如果我在相应刀片模板末尾的常规script标签中导入Vue和JS代码，就可以完成。

但是我的问题是我需要通过webpack压缩和处理所有JS代码（Laravel Mix），以免暴露javascript源。

有什么想法吗？ 预先感谢。

解决方法

如果您运行以下工匠命令以在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语句），然后选择其他布局新实例的元素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实例中设置道具：

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

，并且可以用在这样的方法中：

const app = new Vue({
    el: '#show-order',methods: {
        logMyProp: function() {
            console.log(this.order_id);
        }
    }
});

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

...

data: function() {
    return {
        order: {},}
},methods: {
    loadMyData: function() {
        let vm = this;

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