Sådan bruger du Laravel med Vue.js 3

Vue.js er en af ​​de mest brugte JavaScript-framevorks til at skabe webgrænseflader og enkeltsideapplikationer, sammen med Laravel bliver det et meget kraftfuldt udviklingsværktøj.

Til udvikling af webapps er et meget brugt værktøj vuejs, og i denne artikel vil vi se, hvordan man installerer og bruger det med Laravel. Vue.js-rammen var defiNito progressive rammer fordi det er specialiseret i oprettelse af HTML-visninger og giver dig mulighed for nemt at integrere med komponenter i andre biblioteker og projekter.

Succesen med Vue.js skyldes også valget af Laravel at foreslå det som en frontend-ramme, hvilket fører til udgivelsen af ​​version 2.0.

Laravel projekt skabelse

Første skridt er selvfølgelig at skabe et nyt projekt i Laravel. Hvis du har en på din computer, så brug den, eller du kan oprette en ny kun til denne øvelse.

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

Når projektet er startet, skal du installere npm afhængighed. For at gøre dette skal du køre følgende kommando i din projektmappe:

npm install

Når afhængighederne er installeret, skal du køre følgende kommando for at bygge ressourcerne og sikre dig, at alt virkelig fungerer:

npm run dev

Kommandoen npm run dev udfører en række forskellige kontroller og builds, især 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 færdig, hvis alt fungerer fint, vil du se noget som dette:

Installerer Vue.js

Efter at have forberedt Laravel-projektet, kan vi fortsætte med at installere Vue.js 3. For at gøre dette skal du køre følgende kommando i din projektmappe:

npm install --save-dev vue

Dette vil installere Vue.js som en af ​​udviklingsafhængighederne. Efter kompilering af aktiverne vil din JavaScript-produktionsfil være selvstændig, så du skal blot installere Vue.js som en udviklingsafhængighed.

For at sikre, at Vue 3 blev installeret korrekt, skal du åbne filen package.json (til stede i projektroden) og søg efter "vue" i afsnittet "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, angiver versionsnummeret, at Vue.js 3 er blevet installeret. 

Første forsøg med Vue.js

Indsæt følgende kode i din welcome.blade.php-fil:

<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 lavet et element div med id "vue-app". Inde i script-elementet har vi oprettet en instans af Vue, hvor vi videregiver et objekt til konstruktøren, der tillader os at definish nogle applikationsparametre, såsom data og adfærd, i vores tilfælde:

• el: Reference til elementet div defifærdig i html
• dato: datasæt

Så snart objektet er oprettet, Vue erhverver div med id vue-app og sørger for at udskifte pladsholderen {{ text }} med værdien indeholdt i dataobjektet. Selvfølgelig kan dette objekt indeholde mere end én egenskab, selv af forskellige typer: tal, arrays og andre indlejrede objekter er gyldige

Udover denne udskiftning har Vue også aktiveret sin motor og gjort applikationen responsiv, dvs. enhver ændring af tekstegenskaben vil medføre en øjeblikkelig opdatering af det tilsvarende element i HTML.

Anden test af Vue.js

For at fortsætte til den anden prøveperiode skal du først instansiere appen for at oprette en ny komponent. Du åbner resources/app.js (o resources/js/app.js) og opdatere dens indhold 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 fil opretter vi en ny Vue.js-instans, og for at gøre dette har vi brug for en Vue-komponent, som vi har kaldt HelloVue.vue. For mere information konsultere de officielle dokumenter . 

Opret en ny fil resources/components/HelloVue.vue og indtast følgende kode:

// resources/components/HelloVue.vue

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

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

Den fil, vi lige har oprettet, er en grundlæggende Vue.js-komponent, der udskriver Hello Vue! Kom header1 på siden. Åbn endelig webpack.mix.js fil i projektets rod og opdatere dens indhold 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 fil kaldes metoden .vue() vil kompilere enhver Vue.js-kode og samle den i produktions-JavaScript-filen. Funktionen accepterer et objekt, hvor du kan defifærdiggør den version af Vue.js, du bruger. 

Efter redigering af filen webpack.mix.js du skal kompilere javascript-koden. For at gøre dette kører vi kommandoen igen npm run dev.

Til sidst, for at prøve Vue operationelt, skal du åbne filen resources/views/welcome.blade.php og indtast 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 vil sammen med den tidligere oprettede komponent producere en videobesked Hej Vue!, på grund af at Vue.js-instansen er monteret på et HTML-element med id app.

Kør din applikation vha php artisan serve, og åbn den i din yndlingsbrowser.

Ercole Palmeri

Du er måske også interesseret i ...

• Tjenesteudbydere i Laravel: hvad de er, og hvordan man bruger tjenesteudbydere i Laravel
• Sådan installeres ChatGPT lokalt på din computer
• Sådan tilpasser du Gantt-projektudskrivning i Microsoft Project
• Hvad er et rammeværk i softwareteknologi, defidefinition og typer af rammer
• Her kommer det første digitale testamente med blockchain