Регистр компонента VUE2 в Laravel - PullRequest
Новая
       0

Регистр компонента VUE2 в Laravel

4 голосов
/ 24 февраля 2020

Laravel (5.8) и VUE работают очень хорошо, но мое приложение. js становится большим.

Например, у меня есть следующее приложение. js: 

window.Vue = require('vue');

window.Vue.component('Comp1', require('./components/Comp1.vue').default);
window.Vue.component('Comp2', require('./components/Comp2.vue').default);
window.Vue.component('Comp3', require('./components/Comp3.vue').default);

window.mainApp = new Vue({
  el: '#app'
});

В реальном случае у меня около 30 компонентов + сторонних производителей, что приводит к 1,2 МБ JS для производства.

Итак, я пытаюсь сломать приложение . js файл во многих «связанных с областью» js, просто разделить, поэтому у меня будет что-то вроде:

app. js: 

window.Vue = require('vue');
window.mainApp = new Vue({
  el: '#app'
});

appMainComp. js: 

window.Vue.component('Comp1', require('./components/Comp1.vue').default);
window.Vue.component('Comp2', require('./components/Comp2.vue').default);

appOtherComp. js: 

window.Vue.component('Comp3', require('./components/Comp3.vue').default);

Теперь подвох. Все, что я регистрирую после приложения. js "window.mainApp = new Vue ({el: '#app'});" не регистрироваться.

Итак, есть ли способ зарегистрировать компонент после создания моего mainApp? Что-то вроде 

mainApp.addComponent('./components/Comp1.vue');

Или как-то иначе разбить приложение. js в нескольких файлах?

Ответы [ 2 ]

6 голосов
/ 28 февраля 2020

Вместо разделения компонентов на группы (кстати, интересная идея). Не могли бы вы сделать что-то подобное? Dynamic Imports in Vue.js

Когда это возможно, я рекомендую использовать динамический c импорт для импорта компонентов. Они будут лениво загружаться (через Webpack) при необходимости. 

//Instead of a usual import
import MyComponent from "~/components/MyComponent.js";

//do this
const MyComponent = () => import("~/components/MyComponent.js");
0 голосов
/ 26 февраля 2020

Вы можете использовать стеки:

Blade позволяет вам использовать sh для именованных стеков, которые могут быть визуализированы где-то еще в другом представлении или макете. Это может быть особенно полезно для указания любых библиотек JavaScript, необходимых для ваших дочерних представлений.

https://laravel.com/docs/6.x/blade#stacks

Родительское представление: 

<head>
    <script src="/app.js"></script>
    @stack('loadComponent')
    <script>
        @stack('addComponent')
    </script>            
</head>

Детский вид: 

@push('loadComponent')
    <script src="..."></script>
@endpush

@push('addComponent')
    app.addComponent(...);
@endpush

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

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

...