1

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

URL 处的注册页面就是这种情况/register。使用该命令php artisan make:auth，我可以获得注册相关文件。场景是：

在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/文件夹中，并具有以下内容：

    <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/并具有以下内容：

<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调用将继承layout.blade.php并作为数据发送Register应该在那里呈现的组件。

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

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

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

当然，我npm run dev每次都在测试页面之前运行命令。

问题 1：上述方法有什么问题？然而，正确的方法应该是什么？

编辑：

我的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'
});

EDIT2： 在页面中，我看不到组件中的任何内容Register。我之前忘了提。

EDIT3： 问题 2： Laravel+VueJs 组合不是真正意义上的 MPA（多页面应用程序）吗？

4

2 回答 2

1

我认为回答您的问题并不容易，所以我将分享我的经验。一开始，我以与您相同的方式实现 Vue.js：

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

这是一个彻底的失败。一开始我使用的是单个app.js文件，但我为单个表单加载了大量无用的组件......为什么我只需要两个或三个组件时必须加载整个应用程序？所以我不得不创建大量xxx-app.js文件并打破 DRY 原则。它不是最好的......但它很有效并且很容易实现。

旁注：我没有使用任何类型的文件分块或其他可能已消除此类问题的系统。我刚开始使用 VueJS 开发。可能当时我什至不知道这是可能的。

结构类似于：

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

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

  • 扩展所需的布局以加载所需的 CSS 和额外脚本
  • scripts将你需要的 Vue 实例压入堆栈
  • 在内容部分调用您需要的组件

但是问题出在 javascript 部分……我使用了现代 javascript 应用程序开发功能的 1/3。每天都有新问题出现...首先 JQuery 没用...然后技术 SEO 部分很难处理...然后 Vuex 存储逻辑被复制并且当用户重新加载页面时无用...在一个非常很快我就意识到这种方法是完全错误的......

好吧，至少对于我正在开发的应用程序。所以恕我直言，在许多情况下，你的问题的答案

上述方法有什么问题？然而，正确的方法应该是什么？

是它取决于。

如果您有一个小型应用程序、易于维护且没有复杂的工作流程，那么您的解决方案就可以工作......您只需要记住：

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

如果您面临这些问题，请考虑迁移到完整的 SPA 逻辑......更易于维护，您不必每天都发明一种解决方法等等。

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

于 2019-12-11T16:46:40.030 回答
0

同一个 laravel 项目可以有不同的 vue js 应用。以下是我的方法：

  1. 创建不同的 VueJs 应用程序文件，例如。前端.js、app.js、example.js

  2. 编辑 webpack.mix.js 并使用 mix.js() 函数为每个应用程序添加应用程序的文件。例如

    mix.js('resources/js/app.js', 'public/js') .js('resources/js/frontend.js', 'public/js')

  3. 使用混合功能将应用程序文件添加到刀片中，例如。<script src="{{ mix('js/frontend.js') }}"></script>

该应用程序应该在内部工作和呈现

<div id="app">
        <app></app>
    </div>
于 2022-02-28T19:11:29.547 回答