Начиная с версии 5.3 в состав Laravel входит Vue. Данный JS фреймворк в последнее время набирает популярность, отчасти благодаря тому что он входит в состав популярного PHP фреймворка Laravel, также данный JS фреймворк активно развивается и является мощным и разносторонним инструментом, способным решить широкий круг frontend задач.
В данной статье рассмотрим, как начать работу с Vue на примере запуска стандартного компонента ExampleComponent.vue, входящего в состав Laravel.
Содержание
- создание проекта Laravel
- node.js: установка менеджера пакетов npm
- создание компонента
- регистрация компонента
- создание шаблона
- сборка
- запуск
1.Создание проекта на Laravel
Если вы не работали раннее на Laravel, с порядком установки более подробно можно ознакомиться на официальном сайте Laravel.
В двух словах для начала работы с Laravel необходимо:
- установить composer,
- скачать Laravel Installer через composer,
- создать проект.
Порядок установки Composer описан в официальной документации . В Windows его установка элементарна: достаточно скачать и запустить установщик Composer-Setup.exe.
Для второго пункта открываем терминал, и выполняем команду:
|
1 |
composer global require laravel/installer |
После указанных манипуляций можно создавать Laravel проект, для этого необходимо перейти в терминале в папку проекта (команда cd /путь к папке) и выполнить команду, где project_name – имя создаваемого проекта:
|
1 |
laravel new project_name |
Также для создания проекта можно воспользоваться Composer: перейти в папку проекта и выполнить команду:
|
1 |
composer create-project --prefer-dist laravel/laravel project_name |
После создания проекта, если вы работаете на локальном сервере – перейдите в папку проекта и выполните команду запуска сервера:
|
1 |
php artisan serve |
Данная команда запускает сервер, проверить его работу можно перейдя по адресу http://localhost:8000. Результат должен быть таким:
2. Node.js: установка менеджера пакетов npm
Для работы с Vue, необходимо установить менеджер пакетов NPM Node.js. Для этого в терминале переходим в корневую директорию проекта и выполняем команду:
|
1 |
$ npm install |
При изменениях в JS и CSS файлах, проект необходимо пересобрать, произвести сборку фронтенда, для этого используется команда:
|
1 |
npm run dev |
Для автоматической пересборки проекта при изменениях, необходимо запустить:
|
1 |
npm run watch |
3. Создание компонента Vue
Для совместной работы Vue и Laravel используются компоненты. Компоненты располагаются в директории:
|
1 |
resources/assets/js/components |
Компонент Vue состоит из нескольких секций:
- template – шаблон, выводимое компонентом HTML-содержимое,
- script – логика компонента, по умолчанию используется JS,
- style – стили компонента, язык по умолчанию CSS.
С момента установки в папке с компонентами расположен компонент-образец ExampleComponent.vue. Листинг представлен ниже.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<template> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">Example Component</div> <div class="panel-body"> I'm an example component! </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script> |
Данный компонент выводит на странице панель, содержащую название Example Component и основную часть I’m an example component!. Его мы и будем подключать в нашем проекте.
4. Регистрация компонента Vue
После создания компонента (в нашем случае компонент создан по умолчанию) его необходимо зарегистрировать. Регистрировать компоненты необходимо в файле app.js, расположенном в папке:
|
1 |
resources/assets/js |
Для регистрации компонента в файл app.js необходимо добавить следующую строку:
|
1 |
Vue.component('example-component', require('./components/ExampleComponent.vue')); |
В ней содержится наименование компонента example-component, его мы будем указывать в качестве тега, и путь до компонента ./components/ExampleComponent.vue.
Данная строка должна располагаться в файле после строки с подключением Vue, но перед строкой создания первого экземпляра Vue. Таким образом, после регистрации компонента файл app.js должен выглядеть следующим образом:
|
1 2 3 4 5 6 7 8 9 |
require('./bootstrap'); //подключение Vue window.Vue = require('vue'); //регистрация нашего компонента-образца Vue.component('example-component', require('./components/ExampleComponent.vue')); //создание первого экземпляра Vue const app = new Vue({ el: '#app' }); |
5. Создание шаблона
Для отображения содержимого компонента необходимо открыть и закрыть тег с его наименованием (наименование указывается при регистрации компонента в файле app.js), в нашем случае example-component.
Создадим новый шаблон example.blade.php, разместим его в папке:
|
1 |
resources/views/layouts |
Содержимое шаблона example.blade.php, наличие блока с id=”app” обязательно, именно в него будет выводится содержимое компонента:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> @yield('content') </div> <!-- Scripts --> <script src="{{ asset('js/app.js') }}"></script> </body> </html> |
Если после создания в вашем проекте отсутствует папка resources/layouts, можете выполнить в терминале следующую команду:
|
1 |
php artisan make:auth |
Данная команда генерирует роуты и шаблоны для аутентификации, создает все необходимые для аутентификации папки и файлы. Шаблон app.blade.php, создаваемый при выполнении данной команды, можно взять за основу при создании нашего шаблона.
Далее создадим в папке resources/views шаблон нашей страницы vue.blade.php со следующим содержимым:
|
1 2 3 4 5 6 |
//подключение содержимого шаблона example.blade.php @extends('layouts.example') //вывод содержимого компонента @section('content') <example-component></example-component> @endsection |
После пропишем маршрут до страницы с подключенным шаблоном vue.blade.php в файле web.php, расположенном в папке routes:
|
1 2 3 4 |
//маршрут страницы vue Route::get('/vue', function () { return view('vue'); }); |
Страница будет доступна по следующему адресу:
|
1 |
http://localhost:8000/vue |
6. Сборка фронтенда
Если вы не запускали команду автоматической пересборки, перед запуском приложения пересоберите проект, запустив в терминале команду:
|
1 |
npm run dev |
7. Запуск приложения
Если у вас не запущен сервер, выполните команду:
|
1 |
php artisan serve |
Перейдите в браузере по адресу:
|
1 |
http://localhost:8000/vue |
Результат должен быть таким:
РЕЗЮМЕ
Для запуска стандартного компонента 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 – прописать маршрут до страницы с подключенным компонентом.
