如何为不同的 Vue 布局使用不同的资源？

Question

我阅读了 Full-Stack Vue.js 2 和 Laravel 5 一书的相关部分并浏览了一些问题（例如vuejs application with different layouts (e.g. login layout, page layout, signup etc.)）来解决这个问题。但他们都没有帮助我。

我创建了一个 Laravel + Vue SPA，效果很好。但是当我想用不同的 JavaScript 和 CSS 资源为这个 SPA 创建一个管理员仪表板时（因为仪表板应该有完全不同的样式），我太困惑了。我不知道也不明白我应该遵循什么样的算法来做到这一点。

您可以在下面看到软件的总体视图，

// 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>
    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\.-]*');

在单独的js 文件中创建两个Vue 实例，例如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');

您可以将构建文件公开链接到相应的刀片模板。