Как структурировать экземпляры Vue.js в проекте Laravel? - PullRequest
Новая
       0

Как структурировать экземпляры Vue.js в проекте Laravel?

0 голосов
/ 02 ноября 2019

У меня есть приложение с несколькими веб-страницами. На каждой веб-странице я хочу иметь возможность привязывать экземпляр Vue к какому-либо элементу на странице, чтобы обеспечить более динамичное взаимодействие с пользователем.

В базовом проекте Laravel вы должны привязать Vueэкземпляр для #app в app.js, который я сделал. Однако, при включении любых других экземпляров выдается ошибка «элемент не найден», когда вы находитесь на любой странице, которая не содержит этот элемент. Я полагаю, что вы не должны помещать все свои экземпляры в app.js ...

Какова общая архитектура для разных экземпляров Vue на каждой странице? Я делаю новый файл js для каждой страницы и включаю его?

Извините за мою наивность!

Ответы [ 2 ]

1 голос
/ 02 ноября 2019

Я просто использую один экземпляр Vue.

У меня есть макет мастер-блейда, в котором раздел body выглядит как приведенный ниже код, и я расширяю его для всех страниц. В основном это шаблон с тегом head, заполненным @yield('tags_like_meta', default_value) и некоторыми другими импортами JavaScript. 

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

И затем у меня есть один экземпляр Vue, подобный этому, в моем файле js. 

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

Для разных страниц я использую Vue-router для динамической загрузки компонента. Например, если я хочу, чтобы моя страница контактов загружалась через Vue, мой contact_page.blade.php будет выглядеть следующим образом 

@extends(layout.master)

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

И Vue-router будет обрабатывать рендеринг, если у меня указан URL-адрес страницы контактав маршрутах. 

Vue.use(VueRouter);

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

Таким образом, вы можете работать с одним экземпляром Vue (как упомянуто в документации)

0 голосов
/ 02 ноября 2019

Вы можете создать новый экземпляр Vue в разделе с данными скриптами в app.blade.php, где каждое представление расширяется (в основном) для каждой страницы, где это необходимо, чтобы избежать предупреждения Vue

Например, Laravel Vapor сайт делает * это, на главной странице вы можете найти этот код

* они используют CDN для включения библиотеки вместо скомпилированной из веб-пакета

Экземпляр 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>

Затем создайте новый экземпляр Vue в Bladeпросмотреть файл страницы примерно так: 

@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

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...