Создание компонента Vue.js в Laravel
Создание компонента Vue.js в Laravel позволяет улучшить взаимодействие между фронтендом и бэкендом, обеспечивая плавность и динамичность работы приложений. В статье вы найдете практические примеры подключения Vue.js к Laravel и настройки компонентов для эффективной работы.
Мы расскажем, как легко интегрировать Vue.js в ваш проект Laravel и сделать его более интерактивным. Узнайте, как правильно организовать компоненты и взаимодействие с серверной частью для быстрого и стабильного функционирования.
Шаг 1. Установка необходимых npm пакетов
Для объединения CSS и JavaScript файлов обычно применяют API Laravel Mix. В нашем случае мы воспользуемся аналогичной функциональностью Node.js и менеджера пакетов npm. Для создания файла webpack.mix на основе Node.js мы установим npm, после чего увидим в файле package.json, что Vue находится в списке компонентов:
npm install --unsafe-permПосле успешной установки модулей Node.js в корневом каталоге появится папка node_modules, в которой находятся все необходимые компоненты. Откройте файл app.js, расположенный по адресу resources/assets/js/app.js и добавьте в него следующий код:
require('./bootstrap');
import Vue from 'vue';
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app'
});Обычно файл app.js загружает модуль bootstrap.js и соответствующие плагины jQuery, передает CSRF-токен в AJAX запросах. Наш файл app.js будет загружать модуль Vue и пример компонента, который мы назовем ExampleComponent.vue и расположим в каталоге resources/assets/js/. Для вывода компонента на стартовой странице Laravel нам нужно написать два фрагмента кода – один будет вызывать ID приложения, второй – описывать его дизайн.
Шаг 2. Создание компонента Vue
Как правило, после установки Laravel в каталоге resources/js/component есть какие-то примеры компонентов Vue. Но если никаких примеров там нет, разместим в этом каталоге наш файл ExampleComponent.vue и добавим в него следующий код:
<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>При создании компонента Vue мы используем <template><div….</div><template> для оформления нашей приветственной страницы. Тег <template> включает в себя HTML-код виджета, в то время как тег <script> содержит логику компонента.
Новички в JavaScript на этом этапе задумаются, каким образом компонент ExampleComponent.vue будет исполняться в браузере, если он не содержит корректных скриптов. Для преобразования компонента Vue в стандартный JavaScript мы воспользуемся методом компиляции, схожим с Laravel Mix.
Шаг 3. Использование шаблона Blade для отображения компонента Vue
Создайте файл app.blade.php, разместите его по адресу resources/views/layouts/app.blade.php, и вставьте в него приведенный ниже код.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
@yield('content')
</main>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>Макет определяет корневой элемент #app. Все компоненты Vue должны располагаться в этом элементе. Создайте файл welcome.blade.php, разместите его по адресу resources/views/welcome.blade.php, и добавьте в него приведенный ниже код.
@extends('layouts.app')
@section('content')
<template>
<div class="flex-center position-ref full-height">
<div class="content">
<example-component></example-component>
</div>
</div>
</template>
@endsectionШаг 4. Компиляция компонента Vue в JavaScript
Откройте командную строку и выполните:
npm run watchДанная команда компилирует наши модули и код JavaScript из файла app.js, а также сохраняет результат по адресу /public/js/app.js. Все готово – можно проверять, как компонент Vue выводит приветственную страницу. Надеюсь, это руководство вам понравилось. Если есть вопросы – задавайте их в комментариях к статье.
Комментарии