Laravel-i Vue.js ilə necə istifadə etmək olar 3

Vue.js veb interfeysləri və tək səhifəli proqramlar yaratmaq üçün ən çox istifadə edilən JavaScript çərçivələrindən biridir və Laravel ilə birlikdə çox güclü inkişaf vasitəsinə çevrilir.

Veb proqramların inkişafı üçün geniş istifadə olunan alət vuejs-dir və bu məqalədə biz onu Laravel ilə necə quraşdırıb istifadə edəcəyimizi görəcəyik. Vue.js çərçivəsi idi defipərçim mütərəqqi çərçivə çünki o, HTML görünüşlərinin yaradılmasında ixtisaslaşmışdır və digər kitabxanaların və layihələrin komponentləri ilə asanlıqla inteqrasiya etməyə imkan verir.

Vue.js-in uğuru həm də seçimi ilə bağlıdır Laravel onu frontend çərçivə kimi təklif etmək, beləliklə, 2.0 versiyasının buraxılmasına gətirib çıxarır.

Laravel layihəsinin yaradılması

İlk addım, əlbəttə ki, Laraveldə yeni bir layihə yaratmaqdır. Kompüterinizdə kompüteriniz varsa, ondan istifadə edin və ya sadəcə bu dərslik üçün yenisini yarada bilərsiniz.

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

Layihəni işə saldıqdan sonra onu quraşdırmalı olacaqsınız npm asılılıqlar. Bunu etmək üçün layihə kataloqunuzda aşağıdakı əmri işlədin:

npm install

Asılılıqlar quraşdırıldıqdan sonra resursları yaratmaq və hər şeyin həqiqətən işlədiyinə əmin olmaq üçün aşağıdakı əmri yerinə yetirin:

npm run dev

Əmr npm run dev xüsusilə müxtəlif yoxlamalar və qurmalar həyata keçirir Laravel Mix faylı tərtib edin resources/js/app.js və fayl resources/css/app.css fayllarda public/js/app.js e public/css/app.css.

Bitirdikdən sonra hər şey qaydasındadırsa, belə bir şey görəcəksiniz:

Vue.js quraşdırılır

Laravel layihəsini hazırladıqdan sonra Vue.js 3-ün quraşdırılmasına davam edə bilərik. Bunun üçün layihə kataloqunuzda aşağıdakı əmri yerinə yetirin:

npm install --save-dev vue

Bu, Vue.js-i inkişafdan asılılıqlardan biri kimi quraşdıracaq. Aktivləri tərtib etdikdən sonra istehsal JavaScript faylınız müstəqil olacaq, ona görə də siz Vue.js-i inkişafdan asılılıq kimi quraşdırmalısınız.

Vue 3-ün düzgün quraşdırıldığından əmin olmaq üçün faylı açın package.json (layihə kökündə təqdim olunur) və axtarın "vue" bölmədə "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"
    }
}

Gördüyünüz kimi, versiya nömrəsi Vue.js 3-ün quraşdırıldığını göstərir. 

Vue.js-in ilk sınağı

Welcome.blade.php faylınıza aşağıdakı kodu daxil edin:

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

Gördüyünüz kimi bir element yaratdıq div ilə id "vue-app“. Skript elementinin içərisində biz Vue nümunəsini yaratdıq, burada konstruktora bizə imkan verən obyekti ötürərik. defiBizim vəziyyətimizdə verilənlər və davranışlar kimi bəzi tətbiq parametrlərini nəzərdən keçirin:

• el: elementə istinad div defihtml-də tamamlandı
• tarix: verilənlər toplusu

Obyekt yaradılan kimi, Vue əldə edir div ilə id vue-app və yer tutucunun dəyişdirilməsinin qayğısına qalır {{ text }} məlumat obyektində olan dəyərlə. Əlbəttə ki, bu obyekt birdən çox xüsusiyyəti, hətta müxtəlif növlərdən ibarət ola bilər: nömrələr, massivlər və digər iç-içə obyektlər etibarlıdır

Bu əvəzetmə ilə yanaşı, Vue öz mühərrikini də işə salıb və tətbiqi cavablandırıb, yəni mətn xassəsinə edilən hər hansı dəyişiklik HTML-də müvafiq elementin ani yenilənməsinə səbəb olacaq.

Vue.js-in ikinci sınağı

İkinci sınağa keçmək üçün əvvəlcə yeni komponent yaratmaq üçün proqramı işə salmalı olacaqsınız. açsan resources/app.js (o resources/js/app.js) və məzmununu aşağıdakı kimi yeniləyin:

// resources/app.js

require('./bootstrap');

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

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

Bu faylda biz yeni Vue.js nümunəsi yaradırıq və bunun üçün bizə HelloVue.vue adlandırdığımız Vue komponenti lazımdır. Daha ətraflı məlumat üçün rəsmi sənədlərlə tanış olun . 

Yeni fayl yaradın resources/components/HelloVue.vue və aşağıdakı kodu daxil edin:

// resources/components/HelloVue.vue

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

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

Yaratdığımız fayl çap edən əsas Vue.js komponentidir Hello Vue! gəl header1 səhifədə. Nəhayət, açın webpack.mix.js layihənin kökündəki faylı açın və məzmununu aşağıdakı kimi yeniləyin:

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

Bu faylda metod çağırışı .vue() istənilən Vue.js kodunu tərtib edəcək və onu istehsal JavaScript faylına yığacaq. Funksiya edə biləcəyiniz obyekti qəbul edir defiistifadə etdiyiniz Vue.js versiyasını yoxlayın. 

Faylı redaktə etdikdən sonra webpack.mix.js javascript kodunu tərtib etməlisiniz. Bunun üçün əmri yenidən işə salırıq npm run dev.

Nəhayət, Vue-ni operativ olaraq sınamaq üçün faylı açın resources/views/welcome.blade.php və aşağıdakı kodu daxil edin:

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

Kod əvvəllər yaradılmış komponentlə birlikdə video mesaj yaradacaq Salam Vue!, Vue.js nümunəsi ilə HTML elementinə quraşdırıldığına görə id app.

istifadə edərək tətbiqinizi işə salın php artisan serve, və onu sevimli brauzerinizdə açın.

Ercole Palmeri

Sizə də maraqlı ola bilər ...

• Laraveldə xidmət təminatçıları: onlar nədir və Laraveldə xidmət təminatçılarından necə istifadə etmək olar
• ChatGPT-ni kompüterinizdə yerli olaraq necə quraşdırmaq olar
• Microsoft Project-də Gantt layihə çapını necə fərdiləşdirmək olar
• Proqram Mühəndisliyində Çərçivə nədir, defiçərçivələrin tərifi və növləri
• Burada ilk rəqəmsal iradə gəlir blockchain