如何在 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