Создание компонента Vue.js в Laravel

В данном руководстве мы рассмотрим использование компонента Vue в Laravel. Стартовая страница Laravel создается с использованием JavaScript. В нашем примере для генерации приветственной страницы мы будем использовать Vue.js. Мы поэтапно рассмотрим, как установить и использовать компонент Vue в среде Laravel.

Сначала установим Vue.js и создадим первый компонент Vue в 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 выводит приветственную страницу. Надеюсь, это руководство вам понравилось. Если есть вопросы – задавайте их в комментариях к статье.

Пожалуйста, опубликуйте ваши мнения по текущей теме статьи. За комментарии, подписки, отклики, дизлайки, лайки огромное вам спасибо!

Данная публикация является переводом статьи «Laravel VueJs Setup Create First Vue Component with Laravel» , подготовленная редакцией проекта.

Меню