Slik bruker du Laravel med Vue.js 3

Vue.js er en av de mest brukte JavaScript-rammevorkene for å lage webgrensesnitt og enkeltsideapplikasjoner, sammen med Laravel blir det et veldig kraftig utviklingsverktøy.

For utvikling av nettapper er et mye brukt verktøy vuejs, og i denne artikkelen skal vi se hvordan du installerer og bruker det med Laravel. Vue.js-rammeverket var definagle progressive rammer fordi den er spesialisert på å lage HTML-visninger, og lar deg enkelt integrere med komponenter i andre biblioteker og prosjekter.

Suksessen til Vue.js skyldes også valget av Laravel å foreslå det som et frontend-rammeverk, og dermed føre til utgivelsen av versjon 2.0.

Laravel-prosjektoppretting

Første steg er selvfølgelig å lage et nytt prosjekt i Laravel. Hvis du har en på datamaskinen din, bruk den eller du kan lage en ny bare for denne opplæringen.

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

Etter at prosjektet har startet, må du installere npm avhengighet. For å gjøre dette, kjør følgende kommando i prosjektkatalogen din:

npm install

Når avhengighetene er installert, kjør følgende kommando for å bygge ressursene og sørge for at alt virkelig fungerer:

npm run dev

Kommandoen npm run dev utfører en rekke kontroller og bygg, spesielt Laravel Mix kompiler filen resources/js/app.js og filen resources/css/app.css i filer public/js/app.js e public/css/app.css.

Når du er ferdig hvis alt fungerer bra, vil du se noe slikt:

Installerer Vue.js

Etter å ha forberedt Laravel-prosjektet, kan vi fortsette å installere Vue.js 3. For å gjøre dette, kjør følgende kommando i prosjektkatalogen din:

npm install --save-dev vue

Dette vil installere Vue.js som en av utviklingsavhengighetene. Etter å ha kompilert ressursene, vil JavaScript-filen din for produksjon være selvstendig, så du trenger bare å installere Vue.js som en utviklingsavhengighet.

Åpne filen for å sikre at Vue 3 ble installert riktig package.json (tilstede i prosjektroten) og søk etter "vue" i seksjonen "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"
    }
}

Som du kan se, indikerer versjonsnummeret at Vue.js 3 er installert. 

Første forsøk med Vue.js

Legg inn følgende kode i welcome.blade.php-filen din:

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

Som du kan se har vi laget et element div med id "vue-app". Inne i skriptelementet har vi laget en forekomst av Vue, der vi sender til konstruktøren et objekt som lar oss definish noen applikasjonsparametere, for eksempel data og atferd, i vårt tilfelle:

• el: Referanse til elementet div defiferdig i html
• dato: datasett

Så snart objektet er opprettet, Vue skaffer seg div med id vue-app og tar seg av å erstatte plassholderen {{ text }} med verdien i dataobjektet. Selvfølgelig kan dette objektet inneholde mer enn én egenskap, selv av forskjellige typer: tall, matriser og andre nestede objekter er gyldige

I tillegg til denne erstatningen har Vue også aktivert motoren sin og gjort applikasjonen responsiv, det vil si at enhver endring i tekstegenskapen vil føre til en umiddelbar oppdatering av det tilsvarende elementet i HTML-en.

Andre test av Vue.js

For å fortsette til den andre prøveversjonen, må du først instansiere appen for å opprette en ny komponent. Du åpner resources/app.js (o resources/js/app.js) og oppdater innholdet som følger:

// resources/app.js

require('./bootstrap');

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

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

I denne filen lager vi en ny Vue.js-instans, og for å gjøre dette trenger vi en Vue-komponent som vi har kalt HelloVue.vue. For mer informasjon se de offisielle dokumentene . 

Opprett en ny fil resources/components/HelloVue.vue og skriv inn følgende kode:

// resources/components/HelloVue.vue

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

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

Filen vi nettopp opprettet er en grunnleggende Vue.js-komponent som skrives ut Hello Vue! Kom header1 på siden. Til slutt åpner du webpack.mix.js fil i prosjektroten og oppdater innholdet som følger:

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

I denne filen kalles metoden .vue() vil kompilere eventuell Vue.js-kode og pakke den inn i produksjons-JavaScript-filen. Funksjonen aksepterer et objekt der du kan defifullfør versjonen av Vue.js du bruker. 

Etter å ha redigert filen webpack.mix.js du må kompilere javascript-koden. For å gjøre dette, kjører vi kommandoen på nytt npm run dev.

Til slutt, for å prøve Vue operasjonelt, åpne filen resources/views/welcome.blade.php og skriv inn følgende kode:

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

Koden, sammen med den tidligere opprettede komponenten, vil produsere en videomelding Hei Vue!, på grunn av at Vue.js-forekomsten er montert på et HTML-element med id app.

Kjør applikasjonen din med php artisan serve, og åpne den i favorittnettleseren din.

Ercole Palmeri

Du kan også være interessert i ...

• Tjenesteleverandører i Laravel: hva de er og hvordan du bruker tjenesteleverandører i Laravel
• Slik installerer du ChatGPT lokalt på datamaskinen din
• Hvordan tilpasse Gantt-prosjektutskrift i Microsoft Project
• Hva er et rammeverk i programvareteknikk, defidefinisjon og typer rammer
• Her kommer det første digitale testamentet med blockchain