Как работать в Vite + Laravel без JS-фреймворков?

Работа в Vite + Laravel без использования JS-фреймворков возможна и имеет свои преимущества. Вит (Vite) - это быстрый, простой в использовании инструмент сборки, который предоставляет удобные инструменты для разработчиков фронтенда. Laravel, в свою очередь, является мощным и популярным фреймворком для разработки веб-приложений на PHP.

Для начала работы с Vite + Laravel без использования JS-фреймворков, вам потребуется выполнить несколько шагов:

Шаг 1: Установите Vite
Установите пакетную систему yarn, если ее еще нет на вашей машине. Далее выполните команду:

yarn create vite

Вам будет предложено выбрать шаблон проекта. Выберите лучший вариант для ваших потребностей (например, Vue 3 или React) и введите имя вашего проекта. После завершения этого шага будет создан шаблон проекта Vite.

Шаг 2: Настройка Laravel
Перейдите в каталог вашего Laravel-проекта и установите пакеты Laravel Mix и гибридного сборщика Vite командой:

composer require laravel/ui
php artisan ui vue --auth

Команда выше установит пакеты Laravel UI и Vue, а также настроит очередь командной Django для аутентификации. Если вы не планируете использовать аутентификацию, можете пропустить вторую команду.

Шаг 3: Настройка Vite в Laravel
Вам нужно связать Vite и Laravel, чтобы они работали вместе. Создайте конфигурационный файл vite.config.js в корневом каталоге вашего проекта:

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '^/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  },
  build: {
    outDir: '../public/assets',
    manifest: true,
    emptyOutDir: true,
    rollupOptions: {
      input: '/src/main.js',
    },
  }
})

Замените target в секции proxy на URL вашего локального сервера Laravel (обычно это http://localhost:8000/api). Также укажите правильный путь к файлу main.js.

Выполните следующую команду в корне вашего проекта, чтобы установить сборщик и дополнительные зависимости:

yarn install

Шаг 4: Создание роутов и контроллеров в Laravel
В вашем Laravel-проекте создайте роуты и контроллеры, необходимые для вашего приложения. Обрабатывайте данные из форм с помощью контроллеров и отображайте результаты в шаблонах Blade.

Шаг 5: Создание компонентов и страниц в Vite
Напишите ваши компоненты в Vite, используя HTML, CSS и необходимые скрипты. Компоненты можно импортировать в другие компоненты для сборки вашего интерфейса. Создайте страницы, которые будут использоваться для отображения ваших данных из контроллеров Laravel.

Шаг 6: Связь между Laravel и Vite
Для взаимодействия между Laravel и Vite вам может понадобиться использовать API, чтобы отправлять данные и получать ответы от сервера. Можно использовать fetch API или библиотеку Axios для выполнения HTTP-запросов.

Вы можете использовать пакеты Laravel для упрощенной работы с API, такие как DingoAPI или Laravel Breeze.

Важно учесть что все запросы к серверу должны начинаться с префикса /api. В Vite это настроено в конфигурационном файле vite.config.js.

В заключение, работа в Vite + Laravel без использования JS-фреймворков может быть достаточно затруднительной, так как архитектура Laravel разработана с использованием фреймворка JS-фронтэнда, такого как Vue.js или React. Однако, если вы предпочитаете работать без JS-фреймворков, вы можете использовать подход, описанный выше, чтобы связать Vite и Laravel.