Laravel+Vue: быстрый старт

14 минут на чтение

Начиная с версии 5.3 в состав Laravel входит Vue. Данный JS фреймворк в последнее время набирает популярность, отчасти благодаря тому что он входит в состав популярного PHP фреймворка Laravel, также данный JS фреймворк активно развивается и является мощным и разносторонним инструментом, способным решить широкий круг frontend задач.

В данной статье рассмотрим, как начать работу с Vue на примере запуска стандартного компонента ExampleComponent.vue, входящего в состав Laravel.

Содержание
  1. создание проекта Laravel
  2. node.js: установка менеджера пакетов npm
  3. создание компонента
  4. регистрация компонента
  5. создание шаблона
  6. сборка
  7. запуск

1.Создание проекта на Laravel

Если вы не работали раннее на Laravel, с порядком установки более подробно можно ознакомиться на официальном сайте Laravel.

В двух словах для начала работы с Laravel необходимо:

  1. установить composer,
  2. скачать Laravel Installer через composer,
  3. создать проект.

Порядок установки Composer описан в официальной документации . В Windows его установка элементарна: достаточно скачать и запустить установщик Composer-Setup.exe.

Для второго пункта открываем терминал, и выполняем команду:

После указанных манипуляций можно создавать Laravel проект, для этого необходимо перейти в терминале в папку проекта (команда cd /путь к папке) и выполнить команду, где project_name – имя создаваемого проекта:

Также для создания проекта можно воспользоваться Composer: перейти в папку проекта и выполнить команду:

После создания проекта, если вы работаете на локальном сервере – перейдите в папку проекта и выполните команду запуска сервера:

Данная команда запускает сервер, проверить его работу можно перейдя по адресу http://localhost:8000. Результат должен быть таким:

2. Node.js: установка менеджера пакетов npm

Для работы с Vue, необходимо установить менеджер пакетов NPM Node.js. Для этого в терминале переходим в корневую директорию проекта и выполняем команду:

При изменениях в JS и CSS файлах, проект необходимо пересобрать, произвести сборку фронтенда, для этого используется команда:

Для автоматической пересборки проекта при изменениях, необходимо запустить:

3. Создание компонента Vue

Для совместной работы Vue и Laravel используются компоненты. Компоненты располагаются в директории:

Компонент Vue состоит из нескольких секций:

  • template – шаблон, выводимое компонентом HTML-содержимое,
  • script – логика компонента, по умолчанию используется JS,
  • style – стили компонента, язык по умолчанию CSS.

С момента установки в папке с компонентами расположен компонент-образец ExampleComponent.vue. Листинг представлен ниже.

Данный компонент выводит на странице панель, содержащую название Example Component и  основную часть I’m an example component!. Его мы и будем подключать в нашем проекте.

4. Регистрация компонента Vue

После создания компонента (в нашем случае компонент создан по умолчанию) его необходимо зарегистрировать. Регистрировать компоненты необходимо в файле app.js, расположенном в папке:

Для регистрации компонента в файл app.js необходимо добавить следующую строку:

В ней содержится наименование компонента example-component, его мы будем указывать в качестве тега, и путь до компонента  ./components/ExampleComponent.vue.

Данная строка должна располагаться в файле после строки с подключением Vue, но перед строкой создания первого экземпляра Vue. Таким образом, после регистрации компонента файл app.js должен выглядеть следующим образом:

5. Создание шаблона

Для отображения содержимого компонента необходимо открыть и закрыть тег с его наименованием (наименование указывается при регистрации компонента в файле app.js), в нашем случае example-component.

Создадим новый шаблон example.blade.php, разместим его  в папке:

Содержимое шаблона example.blade.php, наличие блока с id=”app” обязательно, именно в него будет выводится содержимое компонента:

Если после создания в вашем проекте отсутствует папка resources/layouts, можете выполнить в терминале следующую команду:

Данная команда генерирует роуты и шаблоны для аутентификации, создает все необходимые для аутентификации папки и файлы. Шаблон app.blade.php, создаваемый при выполнении данной команды, можно взять за основу при создании нашего шаблона.

Далее создадим в папке resources/views шаблон нашей страницы vue.blade.php со следующим содержимым:

После пропишем маршрут до страницы с подключенным шаблоном vue.blade.php в файле web.php, расположенном в папке routes:

Страница будет доступна по следующему адресу:

6. Сборка фронтенда

Если вы не запускали команду автоматической пересборки, перед запуском приложения пересоберите проект, запустив в терминале команду:

7. Запуск приложения

Если у вас не запущен сервер, выполните команду:

Перейдите в браузере по адресу:

Результат должен быть таким:

РЕЗЮМЕ

Для запуска стандартного компонента Vue необходимо создать или внести изменения в следующих файлах:

  • resources/assets/js/components/ExampleComonent.vue – проверить наличие данного файла в проекте,
  • resources/assets/js/app.js – зарегистрировать данный компонент Vue,
  • resources/views/layouts/example.blade.php – создать данный шаблон,
  • resources/views/vue.blade.php – создать шаблон страницы,
  • routes/views – прописать маршрут до страницы с подключенным компонентом.
Facebook Vk Ok Twitter Telegram