
Это пошаговая инструкция установки 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
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.
Для сборки стилей в один файл прописываем следующие импорты:
<div class="path-file">resources\sass\app.scss</div>
```css
// AdminLTE
@import '~adminlte/plugins/fontawesome-free/css/all.min.css';
@import '~adminlte/dist/css/adminlte.min.css';
Когда файлы прописаны, можем выполнить сборку стилей и скриптов:
npm run build
Собранные файлы css и js будут сохраняться в папку public/build/assets
А во время разработки можем использовать команду:
npm run dev
Запустится Vite. Остановить можно Ctrl + C
*** Авторизируйтесь чтобы писать комментарии.