Как я могу использовать разные ресурсы для разных Vue макетов?

Question

Я прочитал соответствующие разделы книги Full-Stack Vue. js 2 и Laravel 5 и просмотрел некоторые вопросы (например, vuejs приложение с различными раскладками). (например, макет входа в систему, макет страницы, регистрация и т. д. c.) ) для решения этой проблемы. Но никто из них не помог мне.

Я создал Laravel + Vue SPA за пару недель go. Это прекрасно работает. Но когда я хочу создать панель администратора для этого SPA с различными ресурсами JavaScript и CSS (поскольку панель должна иметь совершенно разные стили), я слишком запутался. Я не знаю и не понимаю, какой алгоритм мне следует использовать для этого.

Общий вид программного обеспечения приведен ниже:

// app.js

require('./bootstrap');

import Vue from 'vue'
import App from './views/App'
import router from './router'
import store from './store'

// Layouts
import Default from './views/layouts/Default.vue'
import Dashboard from './views/layouts/Dashboard.vue'

Vue.component('default-layout', Default);
Vue.component('dashboard-layout', Dashboard);

Vue.config.productionTip = false

export default window.vue = new Vue({
    el: 'app',
    components: {
        App
    },
    router,
    store
});

// App.vue

<template>
    <div>
        <component :is="layout">
            <router-view/>
        </component>
    </div>
</template>
<script>
    import $ from 'jquery';
    window.$ = window.jQuery = $;

    const default_layout = 'default';

    export default {
        name: 'App',
        computed: {
            layout() {
                return (this.$route.meta.layout || default_layout) + '-layout';
            }
        },
    };

</script>

// Default Layout

<template>
    <div>
        <default-navigation :is-absolute="isAbsolute" />
        <slot/>
        <default-footer />
    </div>
</template>
<script>
    import DefaultNavigation from '../components/DefaultNavigation.vue';
    import DefaultFooter from '../components/DefaultFooter.vue';

    export default {
        name: 'Default',
        components: {
            DefaultNavigation,
            DefaultFooter,
        },
        computed: {
            isAbsolute() {
                if (this.$route.name == 'home') {
                    return true;
                }
            }
        },
    };

</script>

// Dashboard Layout

<template>
    <div>
        <!-- Nothing here yet. -->
    </div>
</template>
<script>
    // d-header
    // d-sidebar
    // d-title
    // slot
    import DHeader from '../components/Dashboard/Header.vue';
    import DSidebar from '../components/Dashboard/Sidebar.vue';
    import DTitle from '../components/Dashboard/Title.vue';

    export default {
        name: 'Dashboard',
        components: {
            DHeader,
            DSidebar,
            DTitle
        },
    };

</script>

// webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.js('resources/js/dashboard.js', 'public/js')
    .sass('resources/sass/dashboard.scss', 'public/css');

Что я должен сделать, чтобы использовать совершенно другой файл стиля и дополнительный JavaScript файл в макете панели управления?

Answer 1

Если вы ищете отдельные Vue экземпляры для обоих, вы можете выполнить следующие действия:

Создать отдельные blade шаблоны для обоих экземпляров. Добавьте отдельные маршруты для обоих шаблонов.

Route::get('/dashboard/{any?}', function () {
    return view('dashboard');
})->where('any', '[\/\w\.-]*');

Route::get('/{any?}', function () {
    return view('index');
})->where('any', '[\/\w\.-]*');

Создайте два Vue экземпляра в отдельных js файлах, скажем app.js и dashboard.js. Вы можете создать его в другом каталоге, например dashboard/dashboard.js

Обновите webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

mix.js('resources/dashboard/dashboard.js', 'public/js')
    .sass('resources/sass/dashboard.scss', 'public/css');

Вы можете связать файлы сборки в publi c с соответствующими шаблонами блейдов.