Як використовувати Laravel з Vue.js 3

Vue.js є одним із найбільш використовуваних фреймворків JavaScript для створення веб-інтерфейсів і односторінкових додатків, разом із Laravel він стає дуже потужним інструментом розробки.

Для розробки веб-додатків широко використовуваним інструментом є vuejs, і в цій статті ми побачимо, як його встановити та використовувати з Laravel. Фреймворк Vue.js був definito прогресивні рамки оскільки він спеціалізується на створенні переглядів HTML і дозволяє легко інтегрувати компоненти інших бібліотек і проектів.

Успіх Vue.js також пояснюється вибором Laravel щоб запропонувати його як зовнішню структуру, що призвело до випуску версії 2.0.

Створення проекту Laravel

Першим кроком, звичайно, є створення нового проекту в Laravel. Якщо у вас є на вашому комп’ютері, використовуйте його або ви можете створити новий лише для цього підручника.

composer create-project laravel/laravel guide-laravel-vue

Після того, як проект розпочато, вам потрібно буде встановити npm залежності. Для цього виконайте таку команду в каталозі проекту:

npm install

Після встановлення залежностей виконайте таку команду, щоб створити ресурси та переконатися, що все дійсно працює:

npm run dev

Команда npm run dev виконує різноманітні перевірки та збірки, зокрема Laravel Mix скомпілювати файл resources/js/app.js і файл resources/css/app.css у файлах public/js/app.js e public/css/app.css.

Після завершення, якщо все працює нормально, ви побачите щось на зразок цього:

Встановлення Vue.js

Після підготовки проекту Laravel ми можемо перейти до встановлення Vue.js 3. Для цього виконайте таку команду в каталозі проекту:

npm install --save-dev vue

Це встановить Vue.js як одну із залежностей розробки. Після компіляції активів ваш робочий файл JavaScript буде самодостатнім, тому вам просто потрібно встановити Vue.js як залежність від розробки.

Щоб переконатися, що Vue 3 встановлено правильно, відкрийте файл package.json (є в корені проекту) і знайдіть "vue" у розділі "devDependencies":

// package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.37"
    }
}

Як бачите, номер версії вказує на те, що встановлено Vue.js 3. 

Перша спроба Vue.js

У вашому файлі welcome.blade.php помістіть такий код:

<div id="vue-app">
    {{ text }}
</div>
<script>
window.vueApp = new Vue({
  el: '#vue-app',
  data: {
    text: 'Hello World from Vue!'
  }
});
</script>

Як бачите, ми створили елемент div з id "vue-app“. Всередині елемента сценарію ми створили екземпляр Vue, де ми передаємо конструктору об’єкт, який дозволяє нам defiзавершити деякі параметри програми, такі як дані та поведінка, у нашому випадку:

• el: Посилання на елемент div defiзавершено в html
• дата: набір даних

Як тільки об'єкт буде створено, Vue набуває div з id vue-app і піклується про заміну заповнювача {{ text }} зі значенням, що міститься в об’єкті даних. Звичайно, цей об’єкт може містити більше однієї властивості, навіть різних типів: числа, масиви та інші вкладені об’єкти є дійсними

Окрім цієї заміни, Vue також активував свій двигун і зробив програму адаптивною, тобто будь-яка зміна властивості text призведе до миттєвого оновлення відповідного елемента в HTML.

Другий тест Vue.js

Щоб перейти до другої пробної версії, вам спочатку потрібно створити екземпляр програми, щоб створити новий компонент. Ти відкриваєш resources/app.js (o resources/js/app.js) і оновіть його вміст наступним чином:

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

У цьому файлі ми створюємо новий екземпляр Vue.js, і для цього нам потрібен компонент Vue, який ми назвали HelloVue.vue. Для отримання додаткової інформації зверніться до офіційних документів . 

Створіть новий файл resources/components/HelloVue.vue і введіть наступний код:

// resources/components/HelloVue.vue

<template>
  <h1>Hello Vue!</h1>
</template>

<script>
export default {
    name: 'HelloVue'
}
</script>

Файл, який ми щойно створили, є базовим компонентом Vue.js, який друкує Hello Vue! Приходити header1 на сторінці. Нарешті відкрийте webpack.mix.js файл у корені проекту та оновіть його вміст наступним чином:

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({
        version: 3,
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

У цьому файлі виклик методу .vue() скомпілює будь-який код Vue.js і об’єднає його у робочий файл JavaScript. Функція приймає об’єкт, де ви можете defiзавершіть версію Vue.js, яку ви використовуєте. 

Після редагування файлу webpack.mix.js вам потрібно скомпілювати код javascript. Для цього виконуємо команду ще раз npm run dev.

Нарешті, щоб спробувати Vue працювати, відкрийте файл resources/views/welcome.blade.php і введіть наступний код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel Vue</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <hello-vue />
    </div>
</body>
</html>

Код разом із раніше створеним компонентом створить відеоповідомлення Привіт Вю!, оскільки екземпляр Vue.js монтується до елемента HTML за допомогою id app.

Запустіть свою програму за допомогою php artisan serveі відкрийте його у своєму улюбленому браузері.

Ercole Palmeri

Вас також може зацікавити ...

• Постачальники послуг у Laravel: що це таке та як використовувати постачальників послуг у Laravel
• Як інсталювати ChatGPT локально на вашому комп’ютері
• Як налаштувати друк проектів Ганта в Microsoft Project
• Що таке фреймворк у розробці програмного забезпечення, defiвизначення та типи каркасів
• Ось і з’явився перший цифровий заповіт blockchain