如何在 Laravel 项目中构造 Vue.js 实例？

Question

我有一个包含多个 web 页面的应用程序。 在每个网页上，我都希望能够将 Vue 实例绑定到页面上的某个元素，以提供更动态的用户交互。

在基础 Laravel 项目中，您应该将 Vue 实例绑定到我已经完成的 app.js 中的#app。 但是，当您在任何不包含该元素的页面上时，如果包含更多实例，则会出现“找不到元素”错误。 我想您不应该将所有实例都放在 app.js 中...

在每个页面上拥有不同的 Vue 实例的一般架构是什么？ 我是否为每个页面创建一个新的 js 文件并包含它？

对不起我的天真！

Answer 1

您可以在app.blade.php中的 yield scripts 部分创建一个新的 Vue 实例，每个视图都（主要）为每个页面扩展以避免 Vue 警告

例如， Laravel Vapor网站就是这样做的，在主页你可以找到这个代码

*他们使用 CDN 来包含库而不是从 webpack 编译的库

仅用于表单的 Vue 实例

<script>
    var app = new Vue({
                el: '#form',
                data: {
                    email: '',
                    submitted: false,
                    submitting: false
                },
                methods: {
                    onSubmit: function () {
                        this.submitting = true;

                        fetch('/api/early-access', {
                            method: 'POST',
                            body: JSON.stringify({ email: this.email }),
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }).then(response => {
                            this.submitted = true;
                            this.submitting = false;
                        });
                    }
                }
            })
</script>

例如，在layouts/app.blade.php中，在正文的结束标记之前为脚本生成一个部分

<main class="py-4">
            @yield('content')
        </main>
    </div>
    @yield('scripts')
</body>

然后像这样在页面的 Blade 视图文件中实例化一个新的 Vue 实例

@extends('layouts.app')

@section('content')
<div class="container">
    <div id="home-page"></div>
</div>
@endsection

@section('scripts')
<script>
    new Vue({
        el: '#home-page',
    });
</script>
@stop

希望这可以帮助

Answer 2

我只使用一个 Vue 实例。

我有一个主刀片布局，其中正文部分看起来像下面给出的代码，我将它扩展到所有页面。 它基本上是一个带有带有@yield('tags_like_meta', default_value)和一些其他 javascript 导入的头部标签的模板。

<body>
    <div id="app">
        @yield('contents')
    </div>
</body>

然后我的 js 文件上有一个像这样的 Vue 实例。

const app=new Vue({el:"#app"});

对于不同的页面，我使用 Vue-router 来动态加载组件。 例如，如果我想通过 Vue 加载我的联系页面，我的contact_page.blade.php看起来像这样

@extends(layout.master)

@section('contents')
<router-view></router-view>
@endsection

如果我在路由中指定了联系页面 url，Vue-router 将处理渲染。

Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/contact',
            name: 'contact',
            component: () => import('./components/contact/index')
        }]
    });

这样，您可以使用单个 Vue 实例（如文档中所述）

如何在 Laravel 项目中构造 Vue.js 实例？

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-11-02 19:33:44

仅用于表单的 Vue 实例

解决方案2
1 2019-11-02 19:36:33

如何在 Laravel 项目中构造 Vue.js 实例？

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-11-02 19:33:44

仅用于表单的 Vue 实例

解决方案2 1 2019-11-02 19:36:33

解决方案1
2 已采纳 2019-11-02 19:33:44

解决方案2
1 2019-11-02 19:36:33