Artikelen

Laravel gebruiken met Vue.js 3

Vue.js is een van de meest gebruikte JavaScript-framevorks voor het maken van webinterfaces en single-page-applicaties, samen met Laravel wordt het een zeer krachtige ontwikkelingstool.

Voor de ontwikkeling van webapps is vuejs een veelgebruikte tool, en in dit artikel zullen we zien hoe we deze kunnen installeren en gebruiken met Laravel. Het Vue.js-framework was defiNito vooruitstrevend kader omdat het gespecialiseerd is in het maken van HTML-weergaven en u in staat stelt om eenvoudig te integreren met componenten van andere bibliotheken en projecten.

Het succes van Vue.js is mede te danken aan de keuze van Laravel om het voor te stellen als een frontend-framework, wat leidde tot de release van versie 2.0.

Tabella dei inhoud

Creatie van Laravel-projecten

De eerste stap is natuurlijk het aanmaken van een nieuw project in Laravel. Als je er een op je computer hebt staan, gebruik die dan of je kunt een nieuwe maken speciaal voor deze zelfstudie.

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

Nadat het project is gestart, moet u het npm verslavingen. Voer hiervoor de volgende opdracht uit in uw projectdirectory:

npm install

Nadat de afhankelijkheden zijn geïnstalleerd, voert u de volgende opdracht uit om de bronnen te bouwen en te controleren of alles echt werkt:

npm run dev

Het commando npm run dev voert met name een verscheidenheid aan controles en builds uit Laravel Mix het bestand samenstellen resources/js/app.js en het bestand resources/css/app.css in de bestanden public/js/app.js e public/css/app.css.

Als u klaar bent en alles goed werkt, ziet u zoiets als dit:

Vue.js installeren

Nadat we het Laravel-project hebben voorbereid, kunnen we doorgaan met het installeren van Vue.js 3. Voer hiervoor de volgende opdracht uit in uw projectdirectory:

npm install --save-dev vue

Hiermee wordt Vue.js geïnstalleerd als een van de ontwikkelingsafhankelijkheden. Na het compileren van de activa, zal uw productie-JavaScript-bestand op zichzelf staan, dus u hoeft alleen Vue.js te installeren als ontwikkelingsafhankelijkheid.

Om ervoor te zorgen dat Vue 3 correct is geïnstalleerd, opent u het bestand package.json (aanwezig in project root) en zoek naar "vue" in de sectie "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"
    }
}

Zoals u kunt zien, geeft het versienummer aan dat Vue.js 3 is geïnstalleerd.

Eerste poging van Vue.js

Zet in je welcome.blade.php bestand de volgende code:

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

Zoals je kunt zien hebben we een element gemaakt div met id "vue-app“. Binnen het scriptelement hebben we een instantie van Vue gemaakt, waar we een object aan de constructor doorgeven waarmee we dat kunnen defivoltooi enkele toepassingsparameters, zoals gegevens en gedragingen, in ons geval:

el: Verwijzing naar het element div defiklaar in de html
datum: dataset

Zodra het object is gemaakt, Vue verwerft de div met id vue-app en zorgt voor het vervangen van de tijdelijke aanduiding {{ text }} met de waarde in het gegevensobject. Dit object kan natuurlijk meer dan één eigenschap bevatten, zelfs van verschillende typen: getallen, arrays en andere geneste objecten zijn geldig

Naast deze vervanging heeft Vue ook zijn engine geactiveerd en de applicatie responsief gemaakt, d.w.z. elke wijziging aan de teksteigenschap zal een onmiddellijke update van het overeenkomstige element in de HTML veroorzaken.

Tweede test van Vue.js

Om door te gaan naar de tweede proefversie, moet u eerst de app instantiëren om een nieuw onderdeel te maken. U opent resources/app.js (o resources/js/app.js) en werk de inhoud als volgt bij:

// resources/app.js

require('./bootstrap');

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

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

In dit bestand maken we een nieuwe Vue.js-instantie en hiervoor hebben we een Vue-component nodig die we HelloVue.vue hebben genoemd. Voor meer informatie raadpleeg de officiële documenten .

Maak een nieuw bestand aan resources/components/HelloVue.vue en voer de volgende code in:

// resources/components/HelloVue.vue

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

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

Het bestand dat we zojuist hebben gemaakt, is een standaard Vue.js-component die wordt afgedrukt Hello Vue! hoe header1 op de pagina. Open ten slotte de webpack.mix.js bestand in de projectroot en werk de inhoud als volgt bij:

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

In dit bestand wordt de methode call .vue() zal elke Vue.js-code compileren en bundelen in het productie-JavaScript-bestand. De functie accepteert een object waar u kunt defiVoltooi de versie van Vue.js die u gebruikt.

Na het bewerken van het bestand webpack.mix.js je moet de javascript-code compileren. Om dit te doen, voeren we de opdracht opnieuw uit npm run dev.

Ten slotte, om Vue operationeel te proberen, opent u het bestand resources/views/welcome.blade.php en voer de volgende code in:

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

De code levert samen met het eerder gemaakte onderdeel een videoboodschap op Hallo Vue!, omdat de Vue.js-instantie is gekoppeld aan een HTML-element met id app.

Voer uw toepassing uit met behulp van php artisan serveen open het in uw favoriete browser.

Ercole Palmeri

Mogelijk bent u ook geïnteresseerd in ...