Larabel의 VUE2 구성 요소 레지스터
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개의 컴포넌트+서드파티를 가지고 있기 때문에, 생산에 필요한 JS는 1.2 mb가 됩니다.
그래서 저는 많은 '관련된' 영역에서 app.js 파일을 분할하려고 합니다.그래서 다음과 같은 것을 할 수 있습니다.
app.filename:
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.http "window.mainApp = new Vue({ el: '#app'})" 뒤에 등록한 모든 내용이 등록되지 않습니다.
그럼 'main App'을 만든 후에 컴포넌트를 등록할 수 있는 방법이 있나요?뭐랄까
mainApp.addComponent('./components/Comp1.vue');
아니면 여러 파일에서 app.js를 깨는 다른 방법은 없나요?
컴포넌트를 그룹으로 분할하는 대신(재미있는 아이디어 btw).이런 거 할 수 있어요?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");
스택을 사용할 수 있습니다.
블레이드를 사용하면 다른 보기 또는 레이아웃의 다른 위치에 렌더링할 수 있는 명명된 스택에 푸시할 수 있습니다.이것은 특히 하위 보기에 필요한 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
언급URL : https://stackoverflow.com/questions/60376054/vue2-component-register-in-laravel
'programing' 카테고리의 다른 글
| 어떻게 현재 화면 방향 갈 수 있나요? (0) | 2022.08.21 |
|---|---|
| char *envp [ ]는 main() portable의 세 번째 인수입니까? (0) | 2022.08.21 |
| Vue 2 - 소품 배열 기본 유형 설정 방법 (0) | 2022.08.21 |
| 이 글을 쓰는 것을 피하는 방법.$store.state.donkey는 Vue에서 항상? (0) | 2022.08.21 |
| Vuex 상태 필터링 (0) | 2022.08.21 |