지금 내가 전 세계적 구성 요소를 정의하고있어, laravel

Question

내가 Laravel 5.4 및 Vue JS 2.0 내가 특정 페이지에 사용되는 components 세트를 데에서 응용 프로그램을 구축하기 위해 노력하고있어와 뷰 JS 동적 구성 요소를 호출 블레이드 파일의 components 태그를 사용합니다. 로트 구성 요소는 쓸모가 없으므로 믹스 파일이 커지고 페이지 렌더링 속도가 느려질 수 있습니다. 블레이드 파일에서 구성 요소를 동적으로 호출 할 수있는 솔루션을 찾고 있습니다. 나는 다음과 같은 HTML 코드를 가지고 master blade 파일했습니다

Vue.component('NavBar', require('./components/NavBar.vue')); 
Vue.component('HomeBanner', require('./components/HomeBanner.vue')); 
Vue.component('PageFooter', require('./components/Footer.vue')); 
Vue.component('Categories', require('./components/Categories.vue')); 
Vue.component('SubCategory', require('./components/SubCategory.vue')); 

const app = new Vue({ 
    el: '#app' 
}); 

: 다음은 내 app.js 파일입니다

<div id="app"> 
    <nav-bar></nav-bar> 
    @yield('content') 
    <div class="clearfix"></div> 
    <page-footer></page-footer> 
</div> 

<!-- Core Scripts for Vue Components --> 
<script src="{{ asset('js/app.js') }}"></script> 

및 index.blade.php에 가정을 I했습니다

@extends('layouts.master') 

@section('title', 'HomePage') 

@section('content') 
    <home-banner></home-banner> 
@endsection 

및 categories 페이지 나는 가지고있다 :

@extends('layouts.master') 

@section('title', 'Select your category') 

@section('content') 
    <categories></categories> 
@endsection 

어떤 제안이 이것을 달성하는 방법.

Answer 1

이 시도 :

window.Vue = require('vue'); 
Vue.component('categories', require('./components/Categories.vue')); 
new Vue({ 
    el: '#testing' 
}); 

는 불로 불사의 영약의 웹팩에서에 partial.js를 추가

이

새 파일을 만듭니다 말하자면,이과의 app.js의 동일한 수준 partial.js gulpfile.js. 다음과 같아야합니다

elixir(mix => { 
    mix.sass('app.scss') 
     .webpack('app.js') 
     .webpack('partial.js'); 
}); 

을 다음 블레이드 파일에 당신이,이 ID = '테스트'그 후

와 사업부 사이의 '카테고리'태그를 둘러싸 가지고있는 partials.js 스크립트를 가져올 다음과 같이하십시오 :

<script src="/js/partials.js"></script> 

여기 가져 오는 작업은 카테고리 구성 요소를 사용하여 완료해야합니다.

내 카테고리 페이지는 다음과 같이 결국해야

@extends('layouts.master') 

@section('title', 'Select your category') 

@section('content') 
    <div id='testing'> 
     <categories></categories> 
    </div> 
    <script src="/js/partials.js"></script> 
@endsection 

그것을 밖으로 시도하고 그것이 내가 과거에 비슷한 문제를 해결하는 방법은 알려주세요. 건배!