Hoe kinne jo Laravel brûke mei Vue.js 3

Vue.js is ien fan 'e meast brûkte JavaScript-framevorks foar it meitsjen fan webynterfaces en applikaasjes op ien side, tegearre mei Laravel wurdt it in heul krêftich ûntwikkelingsark.

Foar de ûntwikkeling fan webapps is in wiid brûkt ark vuejs, en yn dit artikel sille wy sjen hoe't jo it kinne ynstallearje en brûke mei Laravel. De Vue.js ramt wie definite progressive ramt omdat it is spesjalisearre yn it meitsjen fan HTML views, en kinne jo maklik yntegrearje mei komponinten fan oare biblioteken en projekten.

It súkses fan Vue.js is ek te tankjen oan de kar fan Laravel om it foar te stellen as in frontend-kader, sadat it liedt ta de frijlitting fan ferzje 2.0.

Laravel projekt skepping

De earste stap is fansels it meitsjen fan in nij projekt yn Laravel. As jo ​​ien op jo kompjûter hawwe, brûk it dan of jo kinne in nije oanmeitsje krekt foar dit tutorial.

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

Nei it projekt is begûn, Jo moatte ynstallearje de npm ferslaving. Om dit te dwaan, útfiere it folgjende kommando yn jo projektmap:

npm install

Sadree't de ôfhinklikens binne ynstalleare, fier it folgjende kommando út om de boarnen te bouwen en te soargjen dat alles echt wurket:

npm run dev

It kommando npm run dev fiert in ferskaat oan kontrôles en builds, benammen Laravel Mix kompilearje de triem resources/js/app.js en de triem resources/css/app.css yn triemmen public/js/app.js e public/css/app.css.

As klear as alles goed wurket, sille jo sa'n ding sjen:

Ynstallearje Vue.js

Nei it tarieden fan it Laravel-projekt kinne wy ​​trochgean mei it ynstallearjen fan Vue.js 3. Om dit te dwaan, fier it folgjende kommando yn jo projektmap:

npm install --save-dev vue

Dit sil Vue.js ynstallearje as ien fan 'e ûntwikkelingsôfhinklikens. Nei it gearstallen fan de aktiva sil jo produksje JavaScript-bestân selsstannich wêze, dus jo moatte gewoan Vue.js ynstallearje as ûntwikkelingsôfhinklikens.

Om te soargjen dat Vue 3 goed is ynstalleare, iepenje it bestân package.json (oanwêzich yn projektroot) en sykje nei "vue" yn 'e seksje "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"
    }
}

Sa't jo sjen kinne, jout it ferzjenûmer oan dat Vue.js 3 is ynstalleare. 

Earste besykjen fan Vue.js

Yn jo welcome.blade.php-bestân set de folgjende koade:

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

Sa't jo sjen kinne, hawwe wy in elemint makke div mei id "vue-app“. Binnen it skriptelemint hawwe wy in eksimplaar fan Vue makke, wêrby't wy in objekt trochjaan oan 'e konstruktor wêrmei't wy kinne definish guon applikaasje parameters, lykas gegevens en gedrach, yn ús gefal:

• el: Ferwizing nei it elemint div defiklear yn de html
• datum: dataset

Sadree't it objekt is makke, Vue krijt de div mei id vue-app en soarget foar it ferfangen fan de plakhâlder {{ text }} mei de wearde befette binnen it gegevensobjekt. Fansels kin dit objekt mear as ien eigenskip befetsje, sels fan ferskate soarten: getallen, arrays en oare nêste objekten binne jildich

Njonken dizze ferfanging hat Vue ek syn motor aktivearre en de applikaasje responsyf makke, d.w.s. elke feroaring oan it teksteigenskip sil in direkte fernijing fan it korrespondearjende elemint yn 'e HTML feroarsaakje.

Twadde test fan Vue.js

Om troch te gean nei de twadde proef, moatte jo earst de app ynstantiearje om in nije komponint te meitsjen. Do iepenst resources/app.js (o resources/js/app.js) en bywurkje de ynhâld as folget:

// resources/app.js

require('./bootstrap');

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

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

Yn dizze triem wy meitsje in nij Vue.js eksimplaar, en foar in dwaan dit wy moatte in Vue komponint dat wy hawwe neamd HelloVue.vue. Foar mear ynformaasje rieplachtsje de offisjele dokuminten . 

Meitsje in nije triem resources/components/HelloVue.vue en fier de folgjende koade yn:

// resources/components/HelloVue.vue

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

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

De triem wy krekt makke is in basis Vue.js komponint dat prints Hello Vue! komme header1 op de side. As lêste, iepenje de webpack.mix.js bestân yn 'e projektroot en aktualisearje de ynhâld as folget:

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

Yn dizze triem, de metoade call .vue() sil kompilearje eltse Vue.js koade en bondele it yn de produksje JavaScript triem. De funksje akseptearret in foarwerp dêr't jo kinne definish de ferzje fan Vue.js jo brûke. 

Nei it bewurkjen fan de triem webpack.mix.js jo moatte de javascript-koade kompilearje. Om dit te dwaan, rinne wy ​​it kommando wer út npm run dev.

As lêste, om Vue operasjoneel te besykjen, iepenje it bestân resources/views/welcome.blade.php en fier de folgjende koade yn:

<!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 koade, tegearre mei it earder oanmakke komponint, sil in fideoberjocht produsearje Hallo Vue!, fanwege de Vue.js eksimplaar wurdt monteard op in HTML elemint mei id app.

Rinne jo applikaasje út mei php artisan serve, en iepenje it yn jo favorite browser.

Ercole Palmeri

Jo kinne ek ynteressearje yn ...

• Tsjinstferlieners yn Laravel: wat se binne en hoe't jo tsjinstferlieners yn Laravel brûke
• Hoe kinne jo ChatGPT lokaal op jo kompjûter ynstallearje
• Hoe kinne jo Gantt-projektôfdruk oanpasse yn Microsoft Project
• Wat is in ramt yn software engineering, defidefinysje en soarten kaders
• Hjir komt de earste digitale wil mei blockchain