我正在尝试在Laravel 5.4
和Vue JS 2.0
上构建一个应用程序我有一组components
仅在特定页面中使用,现在我正在定义全局组件和使用刀片文件中的组件标签,正如我所说的那样,很多组件都没用,所以我的混合文件越来越大,我认为这可能会减慢我的页面渲染速度。我正在寻找一种解决方案,我可以在刀片文件中动态调用组件。以下是我的app.js
文件:
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'
});
我有一个master blade
文件,其中包含以下HTML代码:
<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
我
@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
任何建议如何实现这一点。
答案 0 :(得分:1)
试试这个:
使用以下内容在app.js的同一级别创建一个新文件,例如partial.js:
window.Vue = require('vue');
Vue.component('categories', require('./components/Categories.vue'));
new Vue({
el: '#testing'
});
将partial.js添加到gulpfile.js中的elixir webpack。应该是这样的:
elixir(mix => {
mix.sass('app.scss')
.webpack('app.js')
.webpack('partial.js');
});
然后在刀片文件中,您希望将其包含在&#39;类别&#39; ID =&#39;测试&#39;
的div之间的标记之后,导入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
尝试一下,让我知道,这就是我过去如何解决类似问题的方法。干杯!