VUE2组件注册在Laravel

Question

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 文件，只是拆分，所以我会有类似的东西：

应用程序.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？

Answer 1

而不是将组件分成几组（有趣的想法）。 你能做这样的事情吗？ Dynamic Imports in Vue.js

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

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

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

Answer 2

你可以使用堆栈：

Blade 允许您推送到命名堆栈，这些堆栈可以在另一个视图或布局中的其他地方呈现。 这对于指定子视图所需的任何 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

VUE2组件注册在Laravel

问题描述

2 个解决方案

解决方案1
6 已采纳 2020-02-27 22:27:40

解决方案2
0 2020-02-26 11:26:57

VUE2组件注册在Laravel

问题描述

2 个解决方案

解决方案1 6 已采纳 2020-02-27 22:27:40

解决方案2 0 2020-02-26 11:26:57

解决方案1
6 已采纳 2020-02-27 22:27:40

解决方案2
0 2020-02-26 11:26:57