makala

Jinsi ya kutumia Laravel na Vue.js 3

Vue.js ni mojawapo ya viunzi vya JavaScript vinavyotumika sana kuunda violesura vya wavuti na programu-tumizi za ukurasa mmoja, pamoja na Laravel inakuwa zana yenye nguvu sana ya ukuzaji.

Kwa ajili ya maendeleo ya programu za wavuti, chombo kinachotumiwa sana ni vuejs, na katika makala hii tutaona jinsi ya kufunga na kuitumia kwa Laravel. Mfumo wa Vue.js ulikuwa definito mfumo unaoendelea kwa sababu ni maalum katika uundaji wa maoni ya HTML, na hukuruhusu kuunganishwa kwa urahisi na vipengee vya maktaba na miradi mingine.

Mafanikio ya Vue.js pia yanatokana na uchaguzi wa Laravel kuipendekeza kama mfumo wa mbele, na hivyo kusababisha kutolewa kwa toleo la 2.0.

Jedwali la yaliyomo

Uundaji wa mradi wa Laravel

Hatua ya kwanza ni, bila shaka, kuunda mradi mpya katika Laravel. Ikiwa unayo kwenye kompyuta yako, itumie au unaweza kuunda mpya kwa ajili ya mafunzo haya.

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

Baada ya mradi kuanza, utahitaji kusakinisha npm uraibu. Ili kufanya hivyo, endesha amri ifuatayo ndani ya saraka ya mradi wako:

npm install

Mara tu utegemezi umewekwa, endesha amri ifuatayo ili kuunda rasilimali na hakikisha kila kitu kinafanya kazi kweli:

npm run dev

Amri npm run dev hufanya ukaguzi na kujenga anuwai, haswa Laravel Mix kukusanya faili resources/js/app.js na faili resources/css/app.css katika faili public/js/app.js e public/css/app.css.

Ukimaliza ikiwa kila kitu kitafanya kazi vizuri, utaona kitu kama hiki:

Inasakinisha Vue.js

Baada ya kuandaa mradi wa Laravel, tunaweza kuendelea kusakinisha Vue.js 3. Ili kufanya hivyo, endesha amri ifuatayo katika saraka ya mradi wako:

npm install --save-dev vue

Hii itasakinisha Vue.js kama mojawapo ya vitegemezi vya usanidi. Baada ya kukusanya vipengee, faili yako ya JavaScript ya utayarishaji itajitosheleza, kwa hivyo unahitaji tu kusakinisha Vue.js kama tegemezi la usanidi.

Ili kuhakikisha kuwa Vue 3 ilisakinishwa kwa usahihi, fungua faili package.json (ipo kwenye mzizi wa mradi) na utafute "vue" katika sehemu hiyo "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"
    }
}

Kama unavyoona, nambari ya toleo inaonyesha kuwa Vue.js 3 imesakinishwa.

Jaribio la kwanza la Vue.js

Katika faili yako ya welcome.blade.php weka nambari ifuatayo:

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

Kama unaweza kuona tumeunda kipengele div na id "vue-app“. Ndani ya kipengee cha maandishi tumeunda mfano wa Vue, ambapo tunapitisha kwa mjenzi kitu kinachoturuhusu. definish baadhi ya vigezo vya maombi, kama vile data na tabia, kwa upande wetu:

el: Rejea kwa kipengele div defiimekamilika katika html
tarehe: hifadhidata

Mara tu kitu kinapoundwa, Vue hupata div na id vue-app na hushughulikia kuchukua nafasi ya kishika nafasi {{ text }} na thamani iliyo ndani ya kitu cha data. Kwa kweli, kitu hiki kinaweza kuwa na mali zaidi ya moja, hata ya aina tofauti: nambari, safu na vitu vingine vilivyowekwa ni halali.

Kando na uingizwaji huu, Vue pia imewasha injini yake na kufanya programu kuitikia, yaani, mabadiliko yoyote kwenye sifa ya maandishi yatasababisha sasisho la papo hapo la kipengele sambamba katika HTML.

Jaribio la pili la Vue.js

Ili kuendelea na jaribio la pili, utahitaji kwanza kuanzisha programu ili kuunda kijenzi kipya. Unafungua resources/app.js (o resources/js/app.js) na usasishe yaliyomo kama ifuatavyo:

// resources/app.js

require('./bootstrap');

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

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

Katika faili hii tunaunda mfano mpya wa Vue.js, na ili kufanya hivi tunahitaji kijenzi cha Vue ambacho tumekiita HelloVue.vue. Kwa taarifa zaidi wasiliana na hati rasmi .

Unda faili mpya resources/components/HelloVue.vue na ingiza nambari ifuatayo:

// resources/components/HelloVue.vue

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

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

Faili ambayo tumeunda hivi punde ni sehemu ya msingi ya Vue.js ambayo huchapishwa Hello Vue! Kuja header1 kwenye ukurasa. Hatimaye, fungua webpack.mix.js faili kwenye mzizi wa mradi na usasishe yaliyomo kama ifuatavyo:

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

Katika faili hii, njia ya simu .vue() itakusanya msimbo wowote wa Vue.js na kuujumuisha kwenye faili ya JavaScript ya uzalishaji. Chaguo la kukokotoa linakubali kipengee unapoweza definish toleo la Vue.js unalotumia.

Baada ya kuhariri faili webpack.mix.js unahitaji kukusanya msimbo wa javascript. Ili kufanya hivyo, tunaendesha amri tena npm run dev.

Hatimaye, ili kujaribu Vue kiutendaji, fungua faili resources/views/welcome.blade.php na ingiza nambari ifuatayo:

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

Nambari, pamoja na sehemu iliyoundwa hapo awali, itatoa ujumbe wa video Habari Vue!, kutokana na mfano wa Vue.js kuwekwa kwenye kipengele cha HTML na id app.

Endesha programu yako kwa kutumia php artisan serve, na uifungue kwenye kivinjari chako unachopenda.

Ercole Palmeri

Unaweza pia kupendezwa na ...