Isetshenziswa kanjani i-Laravel nge-Vue.js 3

I-Vue.js ingenye yezinhlaka ze-JavaScript ezisetshenziswa kakhulu ekudaleni ukuxhumana kwewebhu nezinhlelo zokusebenza zekhasi elilodwa, kanye ne-Laravel iba ithuluzi lokuthuthukisa elinamandla kakhulu.

Ukuze kuthuthukiswe izinhlelo zokusebenza zewebhu, ithuluzi elisetshenziswa kakhulu yi-vuejs, futhi kulesi sihloko sizobona indlela yokufaka nokuyisebenzisa nge-Laravel. Uhlaka lwe-Vue.js lwaba definito uhlaka oluqhubekayo ngoba ikhethekile ekwakhiweni kokubukwa kwe-HTML, futhi ikuvumela ukuthi uhlanganise kalula nezingxenye zeminye imitapo yolwazi namaphrojekthi.

Impumelelo ye-Vue.js nayo ingenxa yokukhethwa kwe I-Laravel ukuyiphakamisa njengohlaka olungaphambili, ngaleyo ndlela kuholele ekukhishweni kwenguqulo 2.0.

Ukwakhiwa kwephrojekthi yeLaravel

Isinyathelo sokuqala, vele, ukudala iphrojekthi entsha eLaravel. Uma unayo kukhompuyutha yakho, isebenzise noma ungakha entsha yalesi sifundo.

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

Ngemuva kokuthi iphrojekthi isiqalile, uzodinga ukufaka ifayela npm imilutha. Ukuze wenze lokhu, sebenzisa umyalo olandelayo ngaphakathi kwemibhalo yephrojekthi yakho:

npm install

Uma ukuncika sekufakiwe, sebenzisa umyalo olandelayo ukuze wakhe izinsiza futhi uqiniseke ukuthi konke kuyasebenza ngempela:

npm run dev

Umyalo npm run dev yenza amasheke ahlukahlukene kanye nokwakha, ikakhulukazi Laravel Mix hlanganisa ifayela resources/js/app.js kanye nefayela resources/css/app.css emafayilini public/js/app.js e public/css/app.css.

Uma usuqedile uma konke kusebenza kahle, uzobona into enjengale:

Ifaka i-Vue.js

Ngemva kokulungiselela iphrojekthi ye-Laravel, singaqhubeka nokufaka i-Vue.js 3. Ukuze wenze lokhu, sebenzisa umyalo olandelayo kuhla lwemibhalo yephrojekthi yakho:

npm install --save-dev vue

Lokhu kuzofaka i-Vue.js njengokunye kokuncika ekuthuthukisweni. Ngemva kokuhlanganisa amafa, ifayela lakho le-JavaScript elikhiqizwayo lizoziqukatha lona, ​​ngakho-ke udinga nje ukufaka i-Vue.js njengento encike ekuthuthukisweni.

Ukuqinisekisa ukuthi i-Vue 3 ifakwe ngendlela efanele, vula ifayela package.json (khona kumpande wephrojekthi) bese usesha "vue" esigabeni "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"
    }
}

Njengoba ubona, inombolo yenguqulo ibonisa ukuthi i-Vue.js 3 ifakiwe. 

Ukuzama kokuqala kwe-Vue.js

Efayeleni lakho le-welcome.blade.php faka ikhodi elandelayo:

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

Njengoba ubona sidale i-elementi div con id "vue-app“. Ngaphakathi kwesici sombhalo senze isibonelo se-Vue, lapho sidlulisela kumakhi into esivumela ukuthi defiNish amanye amapharamitha wohlelo lokusebenza, njengedatha nokuziphatha, esimweni sethu:

• el: Ireferensi yesici div defikuqediwe ku-html
• idethi: isethi yedatha

Ngokushesha nje lapho into isidalwa, Vue ithola i div con id vue-app futhi inakekela ukufaka isibambindawo {{ text }} ngenani eliqukethwe ngaphakathi kwento yedatha. Impela, le nto ingaqukatha impahla engaphezu kweyodwa, ngisho nezinhlobo ezahlukene: izinombolo, ama-array nezinye izinto ezifakwe isidleke zivumelekile.

Ngaphandle kwalokhu kushintshwa, i-Vue iphinde yavula injini yayo futhi yenza uhlelo lokusebenza luphendule, okungukuthi noma yiluphi ushintsho esakhiweni sombhalo luzobangela isibuyekezo esisheshayo sento ehambisanayo ku-HTML.

Ukuhlolwa kwesibili kwe-Vue.js

Ukuze uqhubekele esivivinyweni sesibili, uzodinga kuqala ukuthi uqinisekise uhlelo lokusebenza ukuze udale ingxenye entsha. Uyavula resources/app.js (o resources/js/app.js) futhi ubuyekeze okuqukethwe kwayo ngale ndlela elandelayo:

// resources/app.js

require('./bootstrap');

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

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

Kuleli fayela sakha isibonelo esisha se-Vue.js, futhi ukwenza lokhu sidinga ingxenye ye-Vue esiyibize ngokuthi HelloVue.vue. Ukuze uthole olunye ulwazi bheka imibhalo esemthethweni . 

Dala ifayela elisha resources/components/HelloVue.vue bese ufaka ikhodi elandelayo:

// resources/components/HelloVue.vue

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

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

Ifayela esisanda kulidala liyingxenye eyisisekelo ye-Vue.js ephrintwayo Hello Vue! woza header1 ekhasini. Ekugcineni, vula ifayela webpack.mix.js ifayela kumpande wephrojekthi futhi ubuyekeze okuqukethwe kwayo ngale ndlela elandelayo:

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

Kuleli fayela, ikholi yendlela .vue() izohlanganisa noma iyiphi ikhodi ye-Vue.js futhi iyinqwaba ibe ifayela le-JavaScript lokukhiqiza. Umsebenzi wamukela into lapho ungakwazi khona defisusa inguqulo ye-Vue.js oyisebenzisayo. 

Ngemva kokuhlela ifayela webpack.mix.js udinga ukuhlanganisa ikhodi ye-javascript. Ukwenza lokhu, siphinda sisebenzise umyalo npm run dev.

Ekugcineni, ukuze uzame i-Vue ngokusebenza, vula ifayela resources/views/welcome.blade.php bese ufaka ikhodi 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>

Ikhodi, kanye nengxenye edalwe ngaphambilini, izokhiqiza umlayezo wevidiyo Sawubona Vue!, ngenxa yesibonelo se-Vue.js efakwe engxenyeni ye-HTML nge id app.

Sebenzisa uhlelo lwakho lokusebenza php artisan serve, bese uyivula kusiphequluli osithandayo.

Ercole Palmeri

Ungahle ube nentshisekelo ku ...

• Abahlinzeki Besevisi eLaravel: ukuthi bayini nokuthi basetshenziswa kanjani Abahlinzeki Besevisi eLaravel
• Uyifaka kanjani i-ChatGPT endaweni yakho kukhompyutha yakho
• Ungenza kanjani ngokwezifiso ukuphrinta kwephrojekthi ye-Gantt ku-Microsoft Project
• Luyini uhlaka ku-Software Engineering, defiincazelo kanye nezinhlobo zezinhlaka
• Nansi intando yokuqala yedijithali nayo blockchain