Ako používať Laravel s Vue.js 3

Vue.js je jedným z najpoužívanejších JavaScript framevorkov na vytváranie webových rozhraní a jednostránkových aplikácií, spolu s Laravelom sa stáva veľmi výkonným vývojovým nástrojom.

Na vývoj webových aplikácií je široko používaný nástroj vuejs a v tomto článku uvidíme, ako ho nainštalovať a používať s Laravelom. Rámec Vue.js bol defijeho progresívny rámec pretože sa špecializuje na vytváranie HTML pohľadov a umožňuje vám jednoduchú integráciu s komponentmi iných knižníc a projektov.

Úspech Vue.js je spôsobený aj výberom laravel navrhnúť ho ako frontend framework, čo vedie k vydaniu verzie 2.0.

Vytvorenie projektu Laravel

Prvým krokom je samozrejme vytvorenie nového projektu v Laravel. Ak ho máte na počítači, použite ho alebo si môžete vytvoriť nový len pre tento návod.

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

Po spustení projektu budete musieť nainštalovať npm závislosti. Ak to chcete urobiť, spustite nasledujúci príkaz v adresári projektu:

npm install

Po nainštalovaní závislostí spustite nasledujúci príkaz na vytvorenie prostriedkov a uistite sa, že všetko naozaj funguje:

npm run dev

Príkaz npm run dev vykonáva najmä rôzne kontroly a zostavovania Laravel Mix kompilovať súbor resources/js/app.js a súbor resources/css/app.css v súboroch public/js/app.js e public/css/app.css.

Po dokončení, ak všetko funguje dobre, uvidíte niečo takéto:

Inštalácia Vue.js

Po príprave projektu Laravel môžeme pristúpiť k inštalácii Vue.js 3. Ak to chcete urobiť, spustite nasledujúci príkaz v adresári vášho projektu:

npm install --save-dev vue

Toto nainštaluje Vue.js ako jednu z vývojových závislostí. Po skompilovaní aktív bude váš produkčný súbor JavaScript samostatný, takže stačí nainštalovať Vue.js ako vývojovú závislosť.

Aby ste sa uistili, že Vue 3 bol nainštalovaný správne, otvorte súbor package.json (prítomné v koreňovom adresári projektu) a vyhľadajte "vue" v sekcii "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"
    }
}

Ako vidíte, číslo verzie znamená, že Vue.js 3 bol nainštalovaný. 

Prvý pokus s Vue.js

Do súboru welcome.blade.php vložte nasledujúci kód:

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

Ako vidíte, vytvorili sme prvok div s id "vue-app“. Vo vnútri elementu skriptu sme vytvorili inštanciu Vue, kde sme konštruktorovi odovzdali objekt, ktorý nám umožňuje defiv našom prípade vyplňte niektoré parametre aplikácie, ako sú údaje a správanie:

• el: Odkaz na prvok div defidokončené v html
• dátum: súbor údajov

Hneď ako je objekt vytvorený, Vue získava div s id vue-app a postará sa o nahradenie zástupného symbolu {{ text }} s hodnotou obsiahnutou v dátovom objekte. Samozrejme, tento objekt môže obsahovať viac ako jednu vlastnosť, dokonca aj rôznych typov: čísla, polia a iné vnorené objekty sú platné

Okrem tejto náhrady Vue tiež aktivoval svoj engine a urobil aplikáciu responzívnou, t. j. akákoľvek zmena vlastnosti textu spôsobí okamžitú aktualizáciu príslušného prvku v HTML.

Druhý test Vue.js

Ak chcete prejsť na druhú skúšobnú verziu, musíte najprv vytvoriť inštanciu aplikácie a vytvoriť nový komponent. Otváraš resources/app.js (o resources/js/app.js) a aktualizujte jeho obsah takto:

// resources/app.js

require('./bootstrap');

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

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

V tomto súbore vytvárame novú inštanciu Vue.js a na to potrebujeme komponent Vue, ktorý sme nazvali HelloVue.vue. Pre viac informácií pozrite si oficiálne dokumenty . 

Vytvorte nový súbor resources/components/HelloVue.vue a zadajte nasledujúci kód:

// resources/components/HelloVue.vue

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

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

Súbor, ktorý sme práve vytvorili, je základný komponent Vue.js, ktorý sa tlačí Hello Vue! Prísť header1 na stránke. Nakoniec otvorte webpack.mix.js súbor v koreňovom adresári projektu a aktualizujte jeho obsah takto:

// 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', [
        //
    ]);

V tomto súbore je volanie metódy .vue() skompiluje akýkoľvek kód Vue.js a spojí ho do produkčného súboru JavaScript. Funkcia akceptuje objekt, kde môžete defizistite verziu Vue.js, ktorú používate. 

Po úprave súboru webpack.mix.js musíte skompilovať kód javascript. Aby sme to urobili, znova spustíme príkaz npm run dev.

Nakoniec, aby ste Vue vyskúšali operatívne, otvorte súbor resources/views/welcome.blade.php a zadajte nasledujúci kód:

<!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>

Kód spolu s predtým vytvoreným komponentom vytvorí video správu Ahoj Vue!, pretože inštancia Vue.js je pripojená k prvku HTML s id app.

Spustite svoju aplikáciu pomocou php artisan servea otvorte ho vo svojom obľúbenom prehliadači.

Ercole Palmeri

Mohlo by vás zaujímať ...

• Poskytovatelia služieb v Laravel: čo sú a ako používať poskytovateľov služieb v Laravel
• Ako nainštalovať ChatGPT lokálne na váš počítač
• Ako prispôsobiť tlač projektu Gantt v programe Microsoft Project
• Čo je rámec v softvérovom inžinierstve, defidefinícia a typy rámcov
• Tu prichádza prvá digitálna vôľa s blockchain