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

Это пошаговая инструкция установки Laravel 9 с реализацией бэкенда на шаблоне панели администратора AdminLTE Bootstrap.

Требования

  • должен быть установлен Composer
  • Версия PHP не менее 8.0.2

Установка Laravel 9

  1. Документация laravel.com/docs/9.x

    В папке куда хотим установить Laravel (например E > laragon > www ) открываем консоль и запускаем команду:

    composer create-project laravel/laravel nameapp

    - где nameapp это название нашего проекта

  2. После того как пакет будет скачан, переходим в консоле в папку только что установленного приложения Laravel cd nameapp и запускаем команду:

    composer require laravel/ui

    Установит пакет Laravel UI

  3. php artisan ui bootstrap --auth

    Появятся кнопки `Log in` и `Register`, но работать они не будут так как БД ещё не подключена и не произведены миграции

  4. npm install

    Установит пакеты NPM, а в корне приложения появится папка node_modules

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

    .env
    DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
  6. php artisan key:generate
  7. php artisan view:clear
  8. php artisan migrate

На данном этапе мы установили Laravel, подключили БД, создали первоначальный макет страниц: login и registr

Установка AdminLTE

Установка актуальной версии AdminLTE разными способами github.com/ColorlibHQ/AdminLTE

Через Composer:

composer require "almasaeed2010/adminlte=~3.2"

NPM

  1. Ставим AdminLTE через NPM:

    npm install admin-lte@^3.2 --save

  2. В папку node_modules будет добавлен пакет admin-lte.

    Переходим в папку AdminLTE и устанавливаем зависимости:

    cd node_modules/admin-lte
    npm install

Настройка Vite

Документация https://vitejs.dev

Изначально нам нужно изменить vite.config.js и добавить в импорт path и алиас для путей к AdminLTE

vite.config.js
```javascript 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.

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

<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';
resources\js\app.js
```javascript // 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

*** чтобы писать комментарии.