Multi Layout Laravel & Vuejs - PullRequest
Новая
       5

Multi Layout Laravel & Vuejs

0 голосов
/ 08 февраля 2020

Когда я использовал только laravel, было легко создать сайт с 2 различными дизайнами, например, панель администратора с использованием AdminLte https://adminlte.io/themes/AdminLTE/index.html и основной сайт с использованием этого дизайна http://venoxis.epizy.com/project/

с блейдом было легко, я, например, делал папку с именем (admin), в которой есть файлы (layout.blade. php, index.blade. php ..et c ) все файлы в этой папке простираются от layout.blade. php: 

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @yield('styles')
</head>
<body>
    <div id="app">
        @include('layouts.navbar');
        <main class="py-4">
            @yield('content')
        </main>
    </div>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    @yield('scripts')
</body>
</html>

, так что теперь у меня есть готовый макет панели администратора, и у каждой страницы есть свой собственный заголовок (стили & title), сценарии и контент

Теперь я использую laravel и vuejs для создания одностраничного приложения. Как я могу это сделать? Я сделал Приложение. vue

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "App"
    }
</script>

<style scoped>

</style>

Приложение. js

require('./bootstrap');
import Vue from 'vue';
import router from './router';
import App from './components/App';
import BootstrapVue from 'bootstrap-vue';
import ExampleComponent from "./components/ExampleComponent";
import Login from "./components/Login";
import Dashboard from "./components/admin/Dashboard";

const routes = [
        {path: '/', component: ExampleComponent},
        {path:'/login', component: Login},
        {path:'/admin', component: Dashboard}
        ]

const router = new VueRouter({
    routes,
    mode: 'history',
});

Vue.use(BootstrapVue);

const app = new Vue({
    el: '#app',
    components: {
        App
    },
    router,
});
...