Установка Laravel и AdminLTE

Это пошаговая инструкция установки 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

Создать Базу Данных и подклюючить её в файле

.env

DB_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

vite.config.js

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.

Для сборки стилей в один файл прописываем следующие импорты:

resources\sass\app.scss

// AdminLTE
@import '~adminlte/plugins/fontawesome-free/css/all.min.css';
@import '~adminlte/dist/css/adminlte.min.css';

resources\js\app.js

// 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

Записи по теме

Комментарии 0

*** Авторизируйтесь чтобы писать комментарии.