Скачиваем AdminLTE .
Возьмем код из страницы AdminLTE-3.0.5\pages\examples\blank.html и перенесем его в наше представление resources/views/admin/index.blade.php .
Копируем в /resources/assets/ все нужные файлы для нашей страницы.
Объединение файлов в один с помощью webpack
Запишем в файл webpack.min.js:
mix.scripts([
'resources/assets/admin/plugins/jquery/jquery.min.js',
'resources/assets/admin/plugins/bootstrap/js/bootstrap.bundle.min.js',
'resources/assets/admin/plugins/bs-custom-file-input/bs-custom-file-input.js',
'resources/assets/admin/plugins/select2/js/select2.full.js',
'resources/assets/admin/js/adminlte.min.js',
'resources/assets/admin/js/demo.js',
'resources/assets/admin/js/my.js'
],
'public/assets/admin/admin.js');
mix.styles([
'resources/assets/admin/plugins/fontawesome-free/css/all.min.css',
'resources/assets/admin/plugins/select2/css/select2.css',
'resources/assets/admin/plugins/select2-bootstrap4-theme/select2-bootstrap4.css',
'resources/assets/admin/css/adminlte.min.css',
'resources/assets/admin/css/my.css'
],
'public/assets/admin/admin.css');
mix.copyDirectory('resources/assets/admin/plugins/fontawesome-free/webfonts', 'public/assets/admin/webfonts');
mix.copyDirectory('resources/assets/admin/img', 'public/assets/admin/img');
mix.copy('resources/assets/admin/css/adminlte.min.css.map', 'public/assets/admin/adminlte.min.css.map');
mix.copy('resources/assets/admin/js/adminlte.min.js.map', 'public/assets/admin/adminlte.min.js.map');
Порядок файлов лучше сохранить, как в исходной странице. В my.js и my.css можно писать свои стили и скрипты.
И запустим nodeJS в командной строке:
npm install
Чтобы обновлять наши изменения используем:
npm run dev
Поменяем ссылки в нашем шаблоне на новые. Для корректности используем хелпер asset. Пример:
<script src="{{ asset('assets/admin/admin.js') }}"></script>
Перезагружаем страницу и смотрим в консоли, какие файлы не могут подгрузится в наш шаблон:
Меняем пути на правильные и делаем:
npm run dev