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