Laravel中的VUE2组件寄存器 [英] VUE2 component register in Laravel

问题描述

Laravel(5.8)和VUE可以很好地配合togheter，但我的app.js越来越大.

Laravel(5.8) and VUE work very nice togheter, but my app.js is getting to big.

例如，我有以下app.js:

For example, i have the following 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.2 mb JS用于生产.

In the real case, I have around 30 components + third party, witch results in a 1.2mb JS for production.

因此，我正试图在许多与区域相关"的js中拆分app.js文件，只是将其拆分，所以我会有类似的东西:

So, I'm tring to break the app.js file in many 'area related' js, just split, so I wuld have someting like:

app.js:

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

appMainComp.js:

appMainComp.js:

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

appOtherComp.js:

appOtherComp.js:

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

现在，抓住了.我在app.js之后注册的所有内容"window.mainApp = new Vue({el:'#app'});不要注册.

Now, the catch. Everthing that I register after the app.js "window.mainApp = new Vue({ el: '#app'});" do not register.

那么，在创建"mainApp"之后，是否有一种方法可以注册组件?

So, is there a way to register a component after my 'mainApp' is created? Something like

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

或通过其他方法在多个文件中破坏app.js吗?

Or any other way to break the app.js in mutiple files?

推荐答案

而不是将组件分成组(有趣的想法btw).你能做这样的事吗? Vue.js中的动态导入

Instead of splitting up components into groups (interesting idea btw). Could you do something like this? Dynamic Imports in Vue.js

只要有可能，我建议使用动态导入来导入组件.必要时将通过Webpack延迟加载它们.

Whenever it’s possible, I’d recommend to use dynamic imports to import components. They will be lazily loaded (by Webpack) when needed.

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

//do this
const MyComponent = () => import("~/components/MyComponent.js");

这篇关于Laravel中的VUE2组件寄存器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！