… Без котлов и раздутых лесов.
Прочтите эту статью в темном режиме, легко скопируйте и вставьте образцы кода и откройте для себя больше подобного содержимого на Devjavu.
Леса Laravel как для фронтенд-разработки, так и для серверной разработки претерпели изменения за последние пару выпусков версий. Например, при формировании аутентификации в Laravel 4 и 5 мы будем использовать старую добрую команду make: auth; который был достаточно декларативным и не давал никаких других возможностей внешнего интерфейса, кроме blade. Эта команда в значительной степени формирует базовую систему аутентификации, включая маршруты, представления и контроллеры, необходимые для регистрации, входа в систему и восстановления пароля.
Это, конечно, удобно, если вы собираетесь использовать Blade для своих представлений и SSR, но иногда это не так. Скажем, вы собираетесь создать SPA с вашей любимой библиотекой Javascript, но по-прежнему хотите использовать все преимущества Laravel.
До Laravel 5.3 Blade был идеальным вариантом для реализации вашего интерфейса в Laravel. Поддержка Vue.js в версии 5.3 представила использование компонентов Vue в вашем приложении Laravel, по умолчанию Laravel генерирует Example.vue component в каталоге resources / assets / js / components. Вам решать, хотите ли вы его использовать.
Поддержка использования React была введена в версии 5.5, позволяя использовать команду Artisan preset command для удаления или установки того, какой предварительный набор шаблонов внешнего интерфейса вы предпочитаете.
php artisan preset react
php artisan preset none
Этот поток был прекращен в более поздних версиях, а именно в версии 6.x.
Замена?
В Laravel 6.x был представлен пакет laravel/ui, чтобы упростить создание каркасов для приложений внешнего интерфейса Javascript в Laravel с поддержкой Vue, React и Bootstrap. Его довольно просто настроить (хотя это не тот путь, по которому мы будем идти). Вы можете проверить официальную документацию, чтобы узнать о скаффолдинге с пакетом Laravel / UI.
Этот поток также был прекращен в версии 8. Однако он обратно совместим, что означает, что даже если вы используете Laravel версии 8, вы все равно можете скаффолдить приложение vue с помощью пакета Laravel / UI.
Замена?
Стартовые наборы Laravel
Это поддерживаемые в настоящее время параметры каркаса ... если они не изменятся в следующем основном выпуске. Здесь есть два варианта строительных лесов:
В Laravel Breeze команда Laravel выделила популярную команду make: auth в отдельный пакет, только на этот раз сгенерированные шаблоны Blade имеют стиль Tailwind CSS, а не Bootstrap , который использовался ранее. Поскольку мы не имеем дела с Blade, этот вариант сейчас к нам не подходит.
Второй вариант; Laravel Jetstream предоставляет нам два варианта строительных лесов - Livewire + Blade или Inertia + Vue. Нет, мы тоже не идем по маршруту Jetstream, почему?
Он раздут.
Нам нужна минимальная настройка Laravel + Vue, что-то вроде того, что вы получаете, когда создаете приложение vue с помощью интерфейса командной строки vue.
Теперь мы знаем, какие у нас есть возможности, что мы хотим и почему мы этого хотим. Давайте начнем.
Начиная
Во-первых, убедитесь, что ваш клиент Laravel обновлен. Почему-то эта ошибка возникает в устаревших версиях.
Обновите свою версию Laravel с помощью:
composer global require laravel/installer
Далее создайте приложение Laravel:
laravel new laravel-vue-minimal
Как только это будет сделано, откройте проект в редакторе кода, откройте файл package.json, найдите и замените каждый экземпляр npm на yarn. Вы можете проигнорировать этот шаг, если хотите продолжать использовать npm. Мы делаем это только для того, чтобы мы могли устанавливать пакеты с yarn вместо NPM, решение, которое в основном основано на предпочтениях.
Ваш объект скрипта должен выглядеть следующим образом (некоторые неотредактированные части опущены):
"scripts": {
"dev": "yarn run development",
"watch": "yarn run development --watch",
"watch-poll": "yarn run watch --watch-poll",
"prod": "yarn run production",
},
if left unchanged it should have npm commands only:
"scripts": {
"dev": "npm run development",
"watch": "npm run development --watch",
"watch-poll": "npm run watch --watch-poll",
"prod": "npm run production",
},
Затем мы установим пакеты, набрав команду yarn в терминале:
yarn or using npm npm i
Нам также необходимо установить некоторые необходимые пакеты в качестве зависимостей разработчика.
yarn add -D vue vue-template-compiler vue-router vuex sass sass-loader or using npm npm install --save-dev vue vue-template-compiler vue-router vuex sass sass-loader
Настройка Vue
Давайте создадим базовую структуру папок Vue, которая будет находиться внутри папки resources / js. Наша структура папок будет выглядеть примерно так:
js/ - Components - Mixins - Pages - Router - Store - Styles App.vue app.js bootstrap.js
Теперь у вас должно получиться что-то подобное.
Затем мы настроим Vue-Router.
В папке Router создайте два файла «routes.js» и «index.js». В файле routes.js мы настроим массив маршрутов и экспортируем его.
Здесь мы определяем дом и маршруты и сопоставляем их с соответствующими компонентами - Home.vue и About.vue (которые мы создадим чуть позже). Затем мы настроим экземпляр Vue Router в файле index.js (внутри папки Router) и экспортируем этот экземпляр.
Далее Vuex.
Мы создадим хранилище Vuex, добавим свойство состояния count и одну мутацию, которую мы зафиксируем позже, чтобы обновить свойство count. В папке Store создайте файл index.js и настройте хранилище Vuex следующим образом:
Если вы раньше работали с Vuex, это должно показаться вам знакомым. Если нет, то можете проверить документацию.
Теперь мы можем настроить наш входной файл, он эквивалентен файлу main.js, который вы получаете при создании приложения vue с помощью vue-cli. Мы найдем этот файл записи в ./resources/js/app.js. Здесь мы должны найти почти пустой файл с импортом bootstrap.js вверху. Оставьте импорт как есть, мы настроим наш экземпляр Vue под ним. Импортируйте хранилище Vuex и экземпляр маршрутизатора vue в файл записи app.js, а затем передайте его в экземпляр Vue.
На этом этапе мы можем настроить все необходимые компоненты. App.vue - это компонент входа, который вы, возможно, видели в нашей настройке экземпляра vue, потому что здесь у нас будет компонент router-view.
Добавьте компонент Navbar.vue в каталог js / Components, поскольку мы уже импортировали его в компонент App.vue. Это будет выглядеть примерно так:
Мы стилизуем это позже.
В папку Pages мы добавим компоненты About.vue и Home.vue соответственно. (Мы уже использовали их в нашем файле route.js).
В компоненте Home мы используем помощник mapState для получения значения count из нашего объекта состояния. Затем мы фиксируем мутацию INCREMENT при нажатии кнопки. Мы также показываем значение счетчика в теге h1.
Затем мы стилизуем наши компоненты. Создайте файл app.scss в каталоге стилей (мы уже импортировали его в файл App.vue).
Примечание: мы делаем это в основном для эстетики, цель этого пошагового руководства заключается в настройке Vue с нуля в Laravel, поэтому не стесняйтесь стилизовать свои компоненты по своему усмотрению.
Добавляем немного стиля к телу:
Ниже мы стилизуем тег h1 и класс navBar.
И, наконец, стилизуем кнопку:
Наша работа здесь сделана. Теперь мы должны убедиться, что Laravel осознает нашу настройку vue.
Настройка Laravel
Мы обновим файл welcome.blade.php в resources / views. Это входной файл, который Laravel автоматически создает, когда вы формируете новый проект Laravel. Удалите все, что у вас есть, и обновите содержимое до следующего:
Наконец, мы обновим файл web.php в папке маршрутов и установим маршрут для приема всей почты домена. Это похоже на ваши правила .htaccess при развертывании приложения Vue на статическом хосте. Общий маршрут должен выглядеть так:
Вот и все.
Отсюда вы должны запустить Laravel-mix, чтобы создать приложение vue, и запустить свой сервер Laravel.
yarn run watch
Запустите сервер Laravel.
php artisan serve
Если все пойдет правильно, вы сможете просмотреть приложение vue (без каламбура), работающее на порту (8000).
Слишком ленив, чтобы самому пройти всю настройку?
Посмотрите репозиторий Laravel-Vue-Minimal, это минимальный каркас для Vue и Laravel, почти все в этом пошаговом руководстве.
Ура 🍻
