Kif tuża Laravel ma 'Vue.js 3

Vue.js huwa wieħed mill-framevorks JavaScript l-aktar użati għall-ħolqien ta 'interfaces tal-web u applikazzjonijiet ta' paġna waħda, flimkien ma 'Laravel isir għodda ta' żvilupp b'saħħitha ħafna.

Għall-iżvilupp ta 'apps tal-web, għodda użata ħafna hija vuejs, u f'dan l-artikolu se naraw kif tinstallaha u tużaha ma' Laravel. Il-qafas Vue.js kien defilejla progressiv minħabba li hija speċjalizzata fil-ħolqien ta 'veduti HTML, u tippermettilek tintegra faċilment ma' komponenti ta 'libreriji u proġetti oħra.

Is-suċċess ta 'Vue.js huwa wkoll dovut għall-għażla ta' Laravel biex jissuġġerixxiha bħala qafas frontend, u b'hekk iwassal għar-rilaxx tal-verżjoni 2.0.

Ħolqien tal-proġett Laravel

L-ewwel pass huwa, ovvjament, li jinħoloq proġett ġdid f'Laravel. Jekk għandek waħda fuq il-kompjuter tiegħek, użaha jew tista' toħloq waħda ġdida biss għal dan it-tutorja.

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

Wara li l-proġett ikun beda, ser ikollok bżonn tinstalla l- npm vizzji. Biex tagħmel dan, mexxi l-kmand li ġej fid-direttorju tal-proġett tiegħek:

npm install

Ladarba d-dipendenzi jiġu installati, ħaddem il-kmand li ġej biex tibni r-riżorsi u kun żgur li kollox jaħdem verament:

npm run dev

Il-kmand npm run dev iwettaq varjetà ta 'kontrolli u jikkompila, b'mod partikolari Laravel Mix ikkumpila l-fajl resources/js/app.js u l-fajl resources/css/app.css fil-fajls public/js/app.js e public/css/app.css.

Meta jkun lest jekk kollox jaħdem sew, tara xi ħaġa bħal din:

Installazzjoni ta' Vue.js

Wara li nippreparaw il-proġett Laravel, nistgħu nipproċedu biex ninstallaw Vue.js 3. Biex tagħmel dan, mexxi l-kmand li ġej fid-direttorju tal-proġett tiegħek:

npm install --save-dev vue

Dan se jinstalla Vue.js bħala waħda mid-dipendenzi tal-iżvilupp. Wara li tikkompila l-assi, il-fajl JavaScript tal-produzzjoni tiegħek se jkun awtonomu, għalhekk għandek bżonn biss tinstalla Vue.js bħala dipendenza tal-iżvilupp.

Biex tiżgura li Vue 3 ġie installat sew, iftaħ il-fajl package.json (preżenti fl-għerq tal-proġett) u fittex "vue" fit-taqsima "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"
    }
}

Kif tistgħu taraw, in-numru tal-verżjoni jindika li Vue.js 3 ġie installat. 

L-ewwel ipprova ta' Vue.js

Fil-fajl welcome.blade.php tiegħek poġġi l-kodiċi li ġej:

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

Kif tistgħu taraw ħloqna element div ma id "vue-app“. Ġewwa l-element tal-iskript ħloqna eżempju ta' Vue, fejn ngħaddu lill-kostruttur oġġett li jippermettilna defitlesti xi parametri tal-applikazzjoni, bħad-dejta u l-imġieba, fil-każ tagħna:

• el: Referenza għall-element div defilest fl-html
• data: dataset

Hekk kif l-oġġett jinħoloq, Vue jakkwista l- div ma id vue-app u jieħu ħsieb li jissostitwixxi l-placeholder {{ text }} bil-valur li jinsab fl-oġġett tad-dejta. Ovvjament, dan l-oġġett jista’ jkun fih aktar minn proprjetà waħda, anke ta’ tipi differenti: numri, arrays u oġġetti oħra nested huma validi

Minbarra din is-sostituzzjoni, Vue attivat ukoll il-magna tagħha u għamlet l-applikazzjoni tirrispondi, jiġifieri kwalunkwe bidla fil-proprjetà tat-test tikkawża aġġornament immedjat tal-element korrispondenti fl-HTML.

It-tieni test ta' Vue.js

Biex tipproċedi għat-tieni prova, l-ewwel ikollok bżonn tagħti istanzija tal-app biex toħloq komponent ġdid. Int tiftaħ resources/app.js (o resources/js/app.js) u aġġorna l-kontenut tiegħu kif ġej:

// resources/app.js

require('./bootstrap');

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

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

F'dan il-fajl qed noħolqu istanza Vue.js ġdida, u biex nagħmlu dan neħtieġu komponent Vue li sejjaħna HelloVue.vue. Għal aktar informazzjoni ikkonsulta d-dokumenti uffiċjali . 

Oħloq fajl ġdid resources/components/HelloVue.vue u daħħal il-kodiċi li ġej:

// resources/components/HelloVue.vue

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

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

Il-fajl li għadna kemm ħloqna huwa komponent Vue.js bażiku li jistampa Hello Vue! Come header1 fuq il-paġna. Fl-aħħarnett, tiftaħ il- webpack.mix.js fajl fl-għerq tal-proġett u aġġorna l-kontenut tiegħu kif ġej:

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

F'dan il-fajl, is-sejħa tal-metodu .vue() se jikkompila kwalunkwe kodiċi Vue.js u jgħaqqadha fil-fajl JavaScript tal-produzzjoni. Il-funzjoni taċċetta oġġett fejn tista' defitlesti l-verżjoni ta' Vue.js li qed tuża. 

Wara li teditja l-fajl webpack.mix.js għandek bżonn tiġbor il-kodiċi javascript. Biex tagħmel dan, nerġgħu nħaddmu l-kmand npm run dev.

Fl-aħħarnett, biex tipprova Vue b'mod operattiv, iftaħ il-fajl resources/views/welcome.blade.php u daħħal il-kodiċi li ġej:

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

Il-kodiċi, flimkien mal-komponent maħluq qabel, se jipproduċi messaġġ bil-vidjo Hello Vue!, minħabba li l-istanza Vue.js qed tiġi mmuntata fuq element HTML bi id app.

Mexxi l-applikazzjoni tiegħek billi tuża php artisan serve, u tiftaħha fil-browser favorit tiegħek.

Ercole Palmeri

Jista 'jkun ukoll interessat fi ...

• Fornituri tas-Servizzi f'Laravel: x'inhuma u kif tuża Fornituri tas-Servizzi f'Laravel
• Kif tinstalla ChatGPT lokalment fuq il-kompjuter tiegħek
• Kif tippersonalizza l-istampar tal-proġett Gantt fil-Proġett Microsoft
• X'inhu Qafas fl-Inġinerija tas-Softwer, defidefinizzjoni u tipi ta' oqfsa
• Hawnhekk tidħol l-ewwel testment diġitali bi blockchain