amanqaku

Uyisebenzisa njani iLaravel ngeVue.js 3

I-Vue.js yenye yezakhelo zeJavaScript ezisetyenziswa kakhulu ekudaleni ujongano lwewebhu kunye nezicelo zephepha elinye, kunye neLaravel iba sisixhobo sophuhliso esinamandla kakhulu.

Ukuphuhliswa kwee-apps zewebhu, isixhobo esisetyenziswa ngokubanzi yi-vuejs, kwaye kweli nqaku siza kubona indlela yokufaka kunye nokuyisebenzisa ngeLaravel. Isakhelo seVue.js sasi defiNito isakhelo esiqhubela phambili kuba ikhethekileyo ekudalweni kweembono zeHTML, kwaye ikuvumela ukuba udibanise ngokulula kunye namalungu amanye amathala eencwadi kunye neeprojekthi.

Impumelelo ye-Vue.js kwakhona ngenxa yokhetho lwe Laravel ukuyicebisa njengesakhelo esingaphambili, ngaloo ndlela ikhokelela ekukhululweni koguqulelo 2.0.

Isiqulatho

Ukudalwa kweprojekthi yeLaravel

Inyathelo lokuqala, ewe, kukwenza iprojekthi entsha eLaravel. Ukuba unayo kwikhompyuter yakho, yisebenzise okanye unokwenza entsha kwesi sifundo.

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

Emva kokuba iprojekthi iqalile, kuya kufuneka uyifake npm Iziyobisi. Ukwenza oku, sebenzisa lo myalelo ulandelayo ngaphakathi kulawulo lweprojekthi yakho:

npm install

Nje ukuba ukuxhomekeka kufakwe, sebenzisa lo myalelo ulandelayo ukwakha izixhobo kwaye uqinisekise ukuba yonke into isebenza ngokwenene:

npm run dev

Umyalelo npm run dev yenza iitshekhi ezahlukeneyo kunye nokwakha, ngakumbi Laravel Mix qokelela ifayile resources/js/app.js kunye nefayile resources/css/app.css kwiifayile public/js/app.js e public/css/app.css.

Xa ugqibile ukuba yonke into isebenza kakuhle, uya kubona into enje:

Kuhlohlwa i-Vue.js

Emva kokulungiselela iprojekthi yeLaravel, sinokuqhubeka nokufaka i-Vue.js 3. Ukwenza oku, sebenzisa lo myalelo ulandelayo kuluhlu lweprojekthi yakho:

npm install --save-dev vue

Oku kuya kuhlohla i-Vue.js njengomnye wabaxhomekeke kuphuhliso. Emva kokuqulunqa ii-asethi, ifayile yakho yeJavaScript yokuvelisa iya kuzimela, ngoko kufuneka nje ufake i-Vue.js njengokuxhomekeka kophuhliso.

Ukuqinisekisa ukuba i-Vue 3 ifakwe ngokuchanekileyo, vula ifayile package.json (zikhoyo kwingcambu yeprojekthi) kwaye ukhangele "vue" kweli candelo "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"
    }
}

Njengoko ubona, inombolo yenguqulo ibonisa ukuba i-Vue.js 3 ifakiwe.

Yizame yokuqala ye-Vue.js

Kwifayile yakho ye-welcome.blade.php beka le khowudi ilandelayo:

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

Njengoko ubona, senze i-elementi div nge id "vue-app“. Ngaphakathi kwendawo yeskripthi senze umzekelo weVue, apho sidlula kumakhi into esivumela ukuba defiNish ezinye iiparamitha zesicelo, njengedatha kunye nokuziphatha, kwimeko yethu:

el: Isalathiso kwisiqalelo div defiigqityiwe kwi-html
umhla: iseti yedatha

Ngokukhawuleza ukuba into yenziwe, Vue ufumana i div nge id vue-app kwaye ithatha inkathalo yokutshintsha isibambi-ndawo {{ text }} ngexabiso eliqulethwe ngaphakathi kwinto yedatha. Kunjalo, le nto inokuqulatha ngaphezulu kwepropathi enye, neentlobo ezahlukeneyo: amanani, uluhlu kunye nezinye izinto ezibekwe kwindlwane ziyasebenza.

Ngaphandle kolu tshintsho, i-Vue iphinde yavula i-injini yayo kwaye yenza isicelo siphendule, okt naluphi na utshintsho kwipropati yokubhaliweyo kuya kubangela uhlaziyo olukhawulezileyo lwento ehambelanayo kwi-HTML.

Uvavanyo lwesibini lwe-Vue.js

Ukuqhubekeka kulingo lwesibini, kuya kufuneka uqale ufake i-app ukwenza icandelo elitsha. Uyavula resources/app.js (o resources/js/app.js) kwaye uhlaziye umxholo wayo ngolu hlobo lulandelayo:

// resources/app.js

require('./bootstrap');

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

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

Kule fayile senza umzekelo omtsha we-Vue.js, kwaye ukwenza oku sifuna icandelo le-Vue esilibize ngokuthi HelloVue.vue. Ukuze ufumane inkcazelo engakumbi jongana namaxwebhu asemthethweni .

Yenza ifayile entsha resources/components/HelloVue.vue kwaye ngenisa ikhowudi elandelayo:

// resources/components/HelloVue.vue

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

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

Ifayile esisandula ukuyenza yinxalenye esisiseko ye-Vue.js eprintayo Hello Vue! eze header1 kwiphepha. Ekugqibeleni, vula i webpack.mix.js ifayile kwingcambu yeprojekthi kwaye uhlaziye imixholo yayo ngolu hlobo lulandelayo:

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

Kule fayile, indlela yokufowuna .vue() izakuqokelela nayiphi na ikhowudi ye-Vue.js kwaye iyidibanise kwimveliso yefayile yeJavaScript. Umsebenzi wamkela into apho unako defiNish uguqulelo lwe Vue.js oyisebenzisayo.

Emva kokuhlela ifayile webpack.mix.js kufuneka uqokelele ikhowudi yejavascript. Ukwenza oku, siqhuba umyalelo kwakhona npm run dev.

Ekugqibeleni, ukuzama i-Vue ngokusebenzayo, vula ifayile resources/views/welcome.blade.php kwaye ngenisa ikhowudi elandelayo:

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

Ikhowudi, kunye necandelo elenziwe ngaphambili, liya kuvelisa umyalezo wevidiyo Molo Vue!, ngenxa yomzekelo we Vue.js inyuswe kwinto ye HTML nge id app.

Faka isicelo sakho usebenzisa php artisan serve, kwaye uyivule kwibhrawuza oyithandayo.

Ercole Palmeri

Unokuba nomdla kwi ...