Laravel VueJS:构建多页应用程序而无需求助于单页应用程序(SPA)方法 [英] Laravel VueJS: building multi page app without resorting to single page application ( SPA ) approach

问题描述

我正在尝试构建Laravel 5.5 + VueJs多页面应用程序.我不想使用SPA(单页应用程序)方法来使它看起来像是一个多页应用程序.

I am trying to build a Laravel 5.5 + VueJs multi page app. I do not want to use SPA (Single Page Application) approach to make it seem to be a multi page app.

在URL /register处的注册页面就是这种情况.使用命令php artisan make:auth，我得到了与注册相关的文件.情况是:

This is the case with the registration page at the URL /register. With the command php artisan make:auth I get the registration related files. The scenarios is :

在web.php中，我有:

Auth::routes();

在app.js中，我有:

window.Vue = require('vue');
const app = new Vue({
    el: '#app',
    components: {
        Register: require('./components/Register.vue')
    }
});

我的layout.blade.php驻留在resources/views/文件夹中，并且具有以下内容:

My layout.blade.php resides within resources/views/ folder and has the following content :

    <div id="app">

                <?php
                  var_dump($component);
                ?>
                @if (isset($component))
                    <component :is={{ $component }} >
                        @endif

                        @yield('content')

                        @if (isset($component))
                    </component>
                @endif
   </div>

register.blade.php文件包含以下内容:

@extends('layout', ['component' => 'Register'])

@section('content')

@endsection

Register.vue留在resources/js/components/内部，并且具有以下内容:

Register.vue stays inside resources/js/components/ and has the following content :

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Register Component mounted.')
        }
    }
</script>

所以我的预期工作流程是:首先将调用register.blade.php，该register.blade.php继承了layout.blade.php并发送应该在此处呈现的Register组件作为数据.

So my intended work flow is: first the register.blade.php will be called that inherits layout.blade.php and sends as data the Register component which is supposed to be rendered there.

我自己也不知道register.blade.php将如何在行的数据中将Register组件作为参数:

I myself also do not know how the register.blade.php will have the component Register as parameter in the data at the line :

@extends('layout', ['component' => 'Register'])

在查看页面源代码时，我什至看不到页面中包含app.js文件.

And while viewing the page source, I even do not see the app.js file being included in the page.

当然，我每次运行页面之前都要先运行npm run dev命令.

Of course, I run the npm run dev command before testing the page every time.

问题1:上述方法有什么问题?但是正确的方法应该是什么?

Question 1 : What is wrong with the approach outlined above ? What should be the proper way however ?

我的webpack.mix.js具有:

let mix = require('laravel-mix');
    mix.js('resources/assets/js/app.js', 'public/js')
        .styles([

            'resources/assets/css/style.css'

        ], 'public/css/style.css')
    ;

mix.options({
    extractVueStyles: 'public/css/vue-style.css'
});

在页面中，我看不到Register组件的内容.我忘了提过.

In the page, I see no content from the Register component . I forgot to mention it before.

问题2 :Laravel + VueJs组合不是真正意义上的MPA(多页应用程序)吗?

Question 2: Is Laravel+VueJs combination not meant for MPA (multi page application) in true sense of the term ?

推荐答案

我认为回答您的问题并不容易，因此，我将分享我的经验.最初，我以与您相同的方式实现Vue.js:

I don't think it's very easy to give an answer to your question, so I will share my experience. At the beginning I was implementing Vue.js in the same way you do so:

• 多页应用
• 每个页面都有自己的组件
• 每次用户移动到另一个页面时，都有可能加载新的js文件.

完全失败.刚开始时，我只使用一个app.js文件，但是我却以一种单一的形式加载大量无用的组件...当我只需要两个或三个组件时，为什么必须加载整个应用程序?因此，我必须创建大量的xxx-app.js文件并打破DRY原则.它不是最好的……但是它很有效并且易于实现.

It was a complete failure. At the beginning I was using a single app.js file, but I was loading tons of useless components for a single form... Why do I have to load the whole application when I need only two or three components? So I had to create tons of xxx-app.js files and break the DRY principle. It wasn't the best... But it worked and was easy to implement.

侧面注意:我没有使用任何类型的文件分块或其他系统，这些文件可能已消除了此类问题.我刚开始从事VueJS开发.大概在那时我什至不知道有可能.

SIDE NOTE: I wasn't using any kind of file chunking or other systems that may have removed this kind of problem. I was at the very beginning with VueJS development. Probably at the time I didn't even know it was possible.

结构类似于:

page1.blade.php

@extends('my.layout')

@push('scripts')
    <script src="asset('page1-app.js')"></script>
@endpush

@section('content')
    <page1-component attr1="{{ $attr1 }}" [...]></page1-component>
@endsection

如您所见，结构有点简单:

As you can see the structure is kinda simple:

• 扩展所需的布局，以加载所需的CSS和其他脚本
• 将scripts堆栈放入所需的Vue实例
• 在内容部分中，调用您需要的组件

• Extend the required layout in order to load the CSS and extra scripts required
• Push in the scripts stack the Vue instance you need
• In the content section call the component you need

但是问题出在javascript部分...我正在使用现代javascript应用程序开发的1/3功能.每天都会出现一个新问题...第一个JQuery没用...然后技术上的SEO部分很难处理...然后Vuex存储逻辑被复制并且在用户重新加载页面时无用...短时间内，我意识到这种方法是完全错误的...

But the problems were born in the javascript part... I was using 1/3 of the features of modern javascript app development. Everyday a new problem was coming out... First JQuery was useless... Then the technical SEO part was hard to handle... Then the Vuex store logic was replicated and useless when the user reloads the page... In a very short time I realized that this approach was completely wrong...

嗯，至少对于我正在开发的应用程序.因此，恕我直言，以及在许多情况下，您问题的答案

Well, for the application I was working on at least. So IMHO and as in many cases the answer to your question

上述方法有什么问题?但是正确的方法应该是什么?

What is wrong with the approach outlined above ? What should be the proper way however ?

是这取决于.

如果您的应用程序很小，易于维护且没有复杂的工作流程，那么您的解决方案就可以工作...您只需要记住以下几点即可:

If you have a small application, easy to maintain and without complex workflow, your solution works... You just have to remember that:

1. 如果您在每个页面中都包含app.js文件，但仅需要1个或2个组件，则可能会变得有些沉重.
2. 存在很高的冗余风险.
3. 初始组件的状态取决于赋予刀片视图的后端属性...如果出现问题，则整个应用程序会混乱.

1. If you include in every page your app.js file but you need only 1 or 2 components it may become a little heavy.
2. There's a high risk of redundancy.
3. The initial components state depends on the backend attributes given to the blade view... If something is wrong, the entire application messes up.

如果您遇到这些问题，请考虑采用完整的SPA逻辑...更易于维护，您不必每天都发明一种解决方法，以此类推.

If you're facing these problems consider to move to a complete SPA logic... Easier to maintain, you don't have to invent a workaround everyday and so on.

如果您的应用程序是企业"解决方案...避免在单个代码库中混合Laravel和Vue ...拆分所有内容并将后端和前端作为两个完全独立的实体进行处理.

If your application is an "enterprise" solution... Well avoid to mix up Laravel and Vue in a single codebase... Split everything and handle the backend and the frontend as two completely separate entities.

这篇关于Laravel VueJS:构建多页应用程序而无需求助于单页应用程序(SPA)方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！