
Это пошаговая инструкция установки Laravel 9 с реализацией бэкенда на шаблоне панели администратора AdminLTE Bootstrap.
Требования
- должен быть установлен Composer
- Версия PHP не менее 8.0.2
Установка Laravel 9
-
Документация laravel.com/docs/9.x
В папке куда хотим установить Laravel (например
E > laragon > www
) открываем консоль и запускаем команду:composer create-project laravel/laravel nameapp
- где
nameapp
это название нашего проекта -
После того как пакет будет скачан, переходим в консоле в папку только что установленного приложения Laravel
cd nameapp
и запускаем команду:composer require laravel/ui
Установит пакет Laravel UI
-
php artisan ui bootstrap --auth
Появятся кнопки `Log in` и `Register`, но работать они не будут так как БД ещё не подключена и не произведены миграции
-
npm install
Установит пакеты NPM, а в корне приложения появится папка
node_modules
-
Создать Базу Данных и подклюючить её в файле
.envDB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD=
-
php artisan key:generate
-
php artisan view:clear
-
php artisan migrate
На данном этапе мы установили Laravel, подключили БД, создали первоначальный макет страниц: login
и registr
Установка AdminLTE
Установка актуальной версии AdminLTE разными способами github.com/ColorlibHQ/AdminLTE
Через Composer:
composer require "almasaeed2010/adminlte=~3.2"
NPM
-
Ставим AdminLTE через NPM:
npm install admin-lte@^3.2 --save
-
В папку
node_modules
будет добавлен пакет admin-lte.Переходим в папку AdminLTE и устанавливаем зависимости:
cd node_modules/admin-lte
npm install
Настройка Vite
Документация https://vitejs.dev
Изначально нам нужно изменить vite.config.js
и добавить в импорт path
и алиас для путей к AdminLTE
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
resolve: {
alias: {
'~adminlte': path.resolve(__dirname, 'node_modules/admin-lte'),
}
},
});
AdminLTE после установки зависимостей содержит в себе необходимые пакеты jQuery, Bootstrap и FontAwesome.
Для сборки стилей в один файл прописываем следующие импорты:
// AdminLTE
@import '~adminlte/plugins/fontawesome-free/css/all.min.css';
@import '~adminlte/dist/css/adminlte.min.css';
// import './bootstrap';
import '~adminlte/plugins/jquery/jquery.min.js';
import '~adminlte/dist/js/adminlte.min.js';
Когда файлы прописаны, можем выполнить сборку стилей и скриптов:
npm run build
Собранные файлы css и js будут сохраняться в папку public/build/assets
А во время разработки можем использовать команду:
npm run dev
Запустится Vite. Остановить можно Ctrl + C
*** Авторизируйтесь чтобы писать комментарии.