Kako uporabljati Laravel z Vue.js 3

Vue.js je eden najpogosteje uporabljenih okvirjev JavaScript za ustvarjanje spletnih vmesnikov in enostranskih aplikacij, skupaj z Laravel pa postane zelo zmogljivo razvojno orodje.

Za razvoj spletnih aplikacij je široko uporabljeno orodje vuejs in v tem članku bomo videli, kako ga namestiti in uporabljati z Laravelom. Ogrodje Vue.js je bilo definito progresivni okvir ker je specializiran za ustvarjanje pogledov HTML in vam omogoča preprosto integracijo s komponentami drugih knjižnic in projektov.

Uspeh Vue.js je tudi posledica izbire Laravel da bi ga predlagali kot frontend framework, kar je vodilo do izdaje različice 2.0.

Ustvarjanje projekta Laravel

Prvi korak je seveda ustvariti nov projekt v Laravelu. Če ga imate v računalniku, ga uporabite ali pa ustvarite novega samo za to vadnico.

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

Ko se projekt začne, boste morali namestiti npm zasvojenosti. Če želite to narediti, zaženite naslednji ukaz v imeniku projekta:

npm install

Ko so odvisnosti nameščene, zaženite naslednji ukaz, da zgradite vire in se prepričate, da vse res deluje:

npm run dev

Ukaz npm run dev izvaja različne preglede in gradnje, zlasti Laravel Mix prevedite datoteko resources/js/app.js in datoteko resources/css/app.css v datotekah public/js/app.js e public/css/app.css.

Ko končate, če vse deluje dobro, boste videli nekaj takega:

Namestitev Vue.js

Ko pripravimo projekt Laravel, lahko nadaljujemo z namestitvijo Vue.js 3. Če želite to narediti, zaženite naslednji ukaz v vašem imeniku projekta:

npm install --save-dev vue

To bo namestilo Vue.js kot eno od razvojnih odvisnosti. Po prevajanju sredstev bo vaša produkcijska datoteka JavaScript samostojna, zato morate samo namestiti Vue.js kot razvojno odvisnost.

Če želite preveriti, ali je bil Vue 3 pravilno nameščen, odprite datoteko package.json (prisoten v korenu projekta) in poiščite "vue" v razdelku "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"
    }
}

Kot lahko vidite, številka različice označuje, da je bil Vue.js 3 nameščen. 

Prvi poskus Vue.js

V datoteko welcome.blade.php vnesite naslednjo kodo:

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

Kot lahko vidite, smo ustvarili element div z id "vue-app“. Znotraj elementa skripta smo ustvarili primerek Vue, kjer konstruktorju posredujemo objekt, ki nam omogoča defiizničite nekatere parametre aplikacije, kot so podatki in vedenja, v našem primeru:

• el: Sklicevanje na element div defikončano v html
• datum: niz podatkov

Takoj ko je predmet ustvarjen, Vue pridobi div z id vue-app in poskrbi za zamenjavo nadomestnega znaka {{ text }} z vrednostjo, ki jo vsebuje podatkovni objekt. Seveda lahko ta objekt vsebuje več kot eno lastnost, tudi različnih vrst: veljavna so števila, nizi in drugi ugnezdeni objekti

Poleg te zamenjave je Vue aktiviral tudi svoj motor in naredil aplikacijo odzivno, kar pomeni, da bo vsaka sprememba lastnosti besedila povzročila takojšnjo posodobitev ustreznega elementa v HTML-ju.

Drugi preizkus Vue.js

Če želite nadaljevati z drugim preizkusom, morate najprej instancirati aplikacijo, da ustvarite novo komponento. Ti Odpri resources/app.js (o resources/js/app.js) in posodobite njeno vsebino na naslednji način:

// resources/app.js

require('./bootstrap');

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

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

V tej datoteki ustvarjamo nov primerek Vue.js in za to potrebujemo komponento Vue, ki smo jo poimenovali HelloVue.vue. Za več informacij preberite uradne dokumente . 

Ustvari novo datoteko resources/components/HelloVue.vue in vnesite naslednjo kodo:

// resources/components/HelloVue.vue

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

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

Datoteka, ki smo jo pravkar ustvarili, je osnovna komponenta Vue.js, ki tiska Hello Vue! kako header1 na strani. Končno odprite webpack.mix.js datoteko v korenu projekta in posodobite njeno vsebino na naslednji način:

// 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 tej datoteki klic metode .vue() bo prevedel katero koli kodo Vue.js in jo povezal v produkcijsko datoteko JavaScript. Funkcija sprejme predmet, kjer lahko defiodpravite različico Vue.js, ki jo uporabljate. 

Po urejanju datoteke webpack.mix.js morate prevesti kodo javascript. Če želite to narediti, znova zaženemo ukaz npm run dev.

Če želite Vue preizkusiti operativno, odprite datoteko resources/views/welcome.blade.php in vnesite naslednjo kodo:

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

Koda bo skupaj s predhodno ustvarjeno komponento ustvarila video sporočilo Pozdravljen Vue!, ker je bil primerek Vue.js nameščen na element HTML z id app.

Zaženite svojo aplikacijo z uporabo php artisan servein ga odprite v svojem najljubšem brskalniku.

Ercole Palmeri

Mogoče bi vas tudi zanimalo ...

• Ponudniki storitev v Laravel: kaj so in kako uporabljati ponudnike storitev v Laravel
• Kako namestiti ChatGPT lokalno na vaš računalnik
• Kako prilagoditi tiskanje projektov Gantt v programu Microsoft Project
• Kaj je ogrodje v programskem inženirstvu, defidefinicija in vrste ogrodij
• Prihaja prva digitalna oporoka z blockchain