Laravel中的VUE2组件寄存器_Laravel_Vuejs2

Laravel中的VUE2组件寄存器

laravel vuejs2

Laravel中的VUE2组件寄存器,laravel,vuejs2,Laravel,Vuejs2,Laravel（5.8）和VUE配合得很好，但我的app.js越来越大了例如，我有以下app.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

Laravel（5.8）和VUE配合得很好，但我的app.js越来越大了

例如，我有以下app.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.2mb的JS用于生产

因此，我尝试在许多“区域相关”js中破坏app.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);

现在，问题来了。在app.js“window.mainApp=new Vue（{el:'#app'}）；”之后注册的所有内容都不注册

那么，有没有办法在我的“mainApp”创建后注册组件？差不多

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

或者以任何其他方式在多个文件中断开app.js？

您可以使用堆栈：

Blade允许您推送到可以在其他视图或布局中的其他位置渲染的命名堆栈。这对于指定子视图所需的任何JavaScript库特别有用

父视图：

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


@堆栈（'loadComponent'）
@堆栈（'addComponent'）

子视图：

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

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

@push（'loadComponent'）
@端推
@推送（'addComponent'）
app.addComponent（…）；
@端推

而不是将组件分成组（顺便说一句，这是一个有趣的想法）。你能这样做吗？

只要有可能，我建议使用动态导入来导入组件。当需要时，它们将被延迟加载（通过网页包）

//而不是通常的导入
从“~/components/MyComponent.js”导入MyComponent；
//这样做
常量MyComponent=（）=>import（“~/components/MyComponent.js”）；

那就行了，谢谢。但是（始终是BUT..^^”）组件js最好作为异步（）导入，因此用户可以立即与页面交互。在这种情况下，我的组件可能会在“mainApp”之前初始化，也可能不会初始化，因此某些组件有时无法工作。这是一个很好的刀片式解决方案，但我相信我需要一个JS解决方案。我只是直接从laravel文档使用脚本标记对示例进行c/p-ed，但您可以使用任何堆栈在你想要的地方，头，身体或加载任何你想要的东西，需要，导入等，可以通过依赖关系解决你的异步问题。太棒了！遗憾的是组件的css不起作用。还有什么我需要做的吗？当你说组件的css时，你是导入css还是确定它的范围？如果你的app.js越来越大也许是时候考虑一下你的后端与前端的松散耦合了，这是一个痛苦的转变，但从长远来看，这很好。只是说。