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

Пошаговая инструкция по установке Laravel 9 и пакета для панели администратора AdminLTE. Первоначальная настройка Vite для подключения файлов стилей и скриптов.

Установка 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
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

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